0

jQuery を使用して簡単なスライド ショーを作成しています。

home.php ファイルにスライドショーがあります。メニューバーがあります。メニューでホームをクリックすると、メインページのコンテンツ div に home.php が読み込まれます。スライドショーもメニューも問題ありません。組み合わせると、最初のロード時に正常に動作します。ただし、何度もロードすると、時間間隔は完全ではなく、不均等で不安定なロード パターンで動作します。これがhome.phpの私のコードです

<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

そしてmenu.phpで

<li><a href=# onclick="$('#content').load('home.php') ;return false">HOME</a></li>
<li><a href=# onclick="$('#content').load('buyitems.php') ;return false">BUY</a></li>
<li><a href=# onclick="$('#content').load('discuss.php') ;return false">DISCUSS</a></li>
<li><a href=# onclick="$('#content').load('locationnear.php') ;return false">NEAR YOU</a></li>

詳細が必要な場合は、お知らせください。

問題 それらは個別に完璧に機能します。メニューバーのホームを数回クリックすると、フェードイン時間が一定ではありません。読み込みが速い画像もあれば、読み込みが遅い画像もあります。

4

1 に答える 1

1

アニメーションの実行が遅れる理由は、おそらく jQuery アニメーション キューです。

あなたのような新しいアニメーションfadeOutはキューに入れられ、同じ要素の前のアニメーションが終了するのを待ちます。

現在のキューをキャンセルするには、使用する可能性がありますjQuery.stop() stop - jQuery API

説明: 一致した要素で現在実行中のアニメーションを停止します。

したがって、あなたの場合、これは次のようになります。

$('.fadein :first-child').stop(true, true).fadeOut()

または、このアニメーションのキューイングを無効にしますfadeOut - jQuery API

アニメーションをエフェクト キューに配置するかどうかを示すブール値。false の場合、アニメーションはすぐに開始されます。

$('.fadein :first-child').fadeOut({ queue : false })

編集

コードをクリックするたびsetIntervalに、アニメーションもキューに追加される新しいコードが開始されるため、間隔をクリアすると役立つ場合があります。

if (window.currenTimer) {
  clearInterval(window.currentTimer);
}
window.currentTimer = setInterval(function(){
  $('.fadein :first-child')
   .stop(true, true)
   .fadeOut()
   .next('img')
   .stop(true, true)
   .fadeIn()
   .end()
   .appendTo('.fadein');
}, 3000);
于 2013-07-14T08:10:40.773 に答える