Jqueryのアニメーションと携帯電話

Question

3つのdivのjqueryを使用してアニメーションを作成しました。左から来て、画面の中央にとどまるh3がありますが、ウィンドウのサイズを変更すると、携帯電話のディメンション手紙は途中で止まらず、続けると私は悪い気分になる。

また、私はナビゲーションバーを小さくして、ドロップダウンを持つボタンをクリックするようになったので、ここでh3段落をクリックするとdivの上にあるdivの後には表示されませんが、画面の特定の部分にとどまります）。

これは私が現在持っているものです。

$(document).ready(function() { 
 
    $("#div1").fadeIn(5000, function() { 
 
    $(".what").animate({ 
 
     "left": "45%" 
 
    }, 1300); 
 
    }); 
 
    $("#div2").fadeIn(3000); 
 
    $("#div3").fadeIn(1500); 
 
});

#what { 
 
    position: absolute; 
 
    left: -40%; 
 
    top: 130px; 
 
} 
 

 
#div1 { 
 
    display: none; 
 
} 
 

 
#div2 { 
 
    display: none; 
 
} 
 

 
#div3 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 

 
<div id="div1" class="container-fluid bg-1 text-center"> 
 
    <h3><a id="what" class="margin what">What Am I?</h3></a> 
 
    <img src="https://thumb.ibb.co/fEchLa/e.jpg" class="img-responsive img- 
 
    circle margin kuklos" style="display:inline" alt="Me" width="350" height="650"> 
 
    <h3>I'm A Young Freelancer.</h3> 
 
</div>

Answer 1

は＃1 DIV1 {位置を与える試してみてください：相対;幅：100％}