0

2 つの異なる div クラスで同時にフェード効果を試しています。そのためには、2 つの異なるスクリプトが必要で、2 つの div に対して同じスクリプトを実行すると、遅れます。(.fadein,.fadeo) のような同じスクリプトで両方の div を実行する方法はありますか? FIDDLE- jsfiddle.net/562am/。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> //Function 1
$(function(){
    $('.fadeo img:gt(0)').hide();
    setInterval(function(){$('.fadeo :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadeo');}, 2000);
});
</script>

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

2 に答える 2

0

2 setInterval は単独で実行されます - 遅延が発生する場合があります。正しい方法は、1 つの間隔を使用して、そこでロジック全体を実行することです。
appendTo を使用すると、DOM を 2 秒ごとに変更します。この方法は、余分なパフォーマンスの問題を引き起こし、アプリケーションの実行が遅くなります。現在の画像のインデックスを保持し、必要に応じて変更することをお勧めします (これは以下に示されています)。
私の例では、画像の最小数を計算しました (個別の div の画像数が異なる場合)。

$(function () {
    // a value can be fixed - a constant 
    var imagesCount = Math.min($('.fadeo > img').size(),
                           $('.fadein > img').size());
    var i = 0;
    display(i);
    setInterval(function () {
        i = (i+1) % imagesCount;
        display(i);
    }, 2000);
});

function display(nth) {
    $('.fadeo > img').hide().eq(nth).show();
    $('.fadein > img').hide().eq(nth).show();    
}
于 2013-07-28T14:35:39.220 に答える