jQueryアニメート機能に問題がありますか?
-
08-07-2019 - |
質問
単純な3つのスライドスライダーが必要だったので、jQプラグインを使用する代わりに、自分でコードをコーディングしました。コードは動作しますが、アニメーションはIE6&の場合を除き、20フレーム以上ではなく、2〜3フレームで発生します。 IE7では、20〜30フレームで完全にアニメーション化します。他のすべてのブラウザー(IE8、Firefox、Chrome、Safari、Opera)では、コンピューターがハングしているように見える動きでアニメーション化します。なぜこれが起こっているのかを知っている人がいるなら、知っておいてください。かさばるプラグインを使用して、スタイル設定もしたくない。
HTML:
<div class="fl-left" id="slide-box">
<div class="slide" id="slide-1">
<img src="images/slider/1.jpg" alt="The Image Description" />
<p class="slide-text">"The Description About The Image/Slide"</p>
</div>
<div class="slide" id="slide-2">
<img src="images/slider/1.jpg" alt="The Image Description" />
<p class="slide-text">"The Description About The Image/Slide"</p>
</div>
<div class="slide" id="slide-3">
<img src="images/slider/1.jpg" alt="The Image Description" />
<p class="slide-text">"The Description About The Image/Slide"</p>
</div>
</div>
CSS:
#slide-box{
position:relative;
width:472px;
height:192px;
border-bottom:3px solid #fff;
overflow:hidden;
}
.slide{ position:absolute;
float:left; width:455px;
overflow:hidden;
border:1px solid #000;
margin:8px 8px 0 8px;
}
.slide img{ float:left; }
.slide-text{ display:block;
width: 140px;
height:132px;
background:#ecefdc;
float:left;
padding: 10px 0px;
}
#slide-1 { left:0px; }
#slide-2 { left:467px; }
#slide-3 { left:934px; }
jQuery:
$('#slide-but-1').click(function(){
$('#slide-1').animate({"left": "0px"}, "slow");
$('#slide-2').animate({"left": "467px"}, "slow");
$('#slide-3').animate({"left": "934px"}, "slow");
});
$('#slide-but-2').click(function(){
$('#slide-1').animate({"left": "-467px"}, "slow");
$('#slide-2').animate({"left": "0px"}, "slow");
$('#slide-3').animate({"left": "467px"}, "slow");
});
$('#slide-but-3').click(function(){
$('#slide-1').animate({"left": "-934px"}, "slow");
$('#slide-2').animate({"left": "-467px"}, "slow");
$('#slide-3').animate({"left": "0px"}, "slow");
});
解決 2
コードは、私が使用していたjQuery Drop Shadowプラグインと衝突していました。これを削除すると、アニメーションがスムーズになりました。
他のヒント
問題はスライドのスタイリング、つまり float:left
にあると思われます-絶対配置を使用しているため、冗長です。
さらに、次のようにスライドのコンテナを追加すると、パフォーマンスが向上します。
<div class="fl-left" id="slide-box">
<div id="slide-container">
<div class="slide" />
<div class="slide" />
<div class="slide" />
</div>
</div>
この方法では、コンテナ $( '#slide-container')。animate({left:0}、&quot; slow&quot;);
のみをアニメーション化できます。結果のコードはクリーナー。
所属していません StackOverflow