0

我正在同时在两个不同的 div 类中尝试淡化效果。为此，我需要两个不同的脚本，并为两个 div 执行相同的脚本，它会滞后。有没有办法在同一个脚本中执行两个 div，比如（.fadein，.fadeo）？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

这就是您将两者组合为1个功能的意思吗？

$(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-28T14:25:54.500 回答
0

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-28T14:35:39.220 回答