執行兩個div在相同的javascript

我試圖在兩個不同的div類在同一時間淡入淡出效果。爲此，我需要兩個不同的腳本，併爲兩個div執行相同的腳本，但它滯後。有什麼辦法可以在（.fadein，.fadeo）這樣的腳本中執行這兩個div嗎？ FIDDLE- jsfiddle.net/562am/。執行兩個div在相同的javascript

<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>

來源

2013-07-28 Rachit Sharma

我冒昧地將[tag：java]標籤更改爲[tag：javascript]標籤。請注意，這兩種語言有很大的不同，如果你想得到專家在你的問題領域的幫助，你會非常小心你使用的標籤。舉個例子，我在Java中的表現相當不錯，但是我對你的問題可能並不是絲毫的線索。祝你好運！ –

非常感謝。期待儘快幫助。 –

你想達到類似嗎？ http://jsfiddle.net/XVfMw/ –

這是你的意思將兩者結合爲一個函數？

$(function(){ 
    var classes = ['.fadeo', '.fadein']; 

    $.each(classes, function (index, elem){ 
     var selectorToHide = elem + ' img:gt(0)', 
      selectorToFadeOut = elem + ' :first-child'; 

     $(selectorToHide).hide(); 
     setInterval(function() { 
      $(selectorToFadeOut) 
       .fadeOut() 
       .next('img') 
       .fadeIn() 
       .end() 
       .appendTo(elem); 
      }, 
      2000); 
    }); 
});

來源

2013-07-28 14:25:54

2對自己的setInterval運行 - 它們可能產生的滯後。正確的方法是使用1個區間並在那裏完成整個邏輯。
使用appendTo您每2秒更改一次DOM。此方法會導致額外的性能問題並導致應用程序運行速度降低我建議你保留一個當前圖像的索引，並根據需要進行更改（如下所示）。
在我的例子中，我計算了圖像的最小數量（如果單獨的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-28 14:35:39 HeM01

執行兩個div在相同的javascript

回答

相關問題