javascript - 如何使用淡出进行迭代？

Question

我想改进这段代码，使每个图像独立出现并淡出。

这一个面临一个问题，它正在快速迭代，所以只出现最后一个图像并进行淡出。

jQuery.each(
slidesArray, function (index, value) {

   var linkHref = value[1];
   var imageSource = value[0];;


   $("#slider").html("<a href='" + linkHref + "'><img src='" +
                     imageSource + "'></a>").fadeOut(5000);

});

你能帮助我吗 ？请注意，图像应分别进行动画处理。

Answer 1

这是一个小 jQuery 插件，它会有所帮助：

jQuery.slowEach = function( array, interval, callback ) {
    if( ! array.length ) return;
    var i = 0;
    next();
    function next() {
        if( callback.call( array[i], i, array[i] ) !== false )
            if( ++i < array.length )
                setTimeout( next, interval );
    }
};
jQuery.fn.slowEach = function( interval, callback ) {
    jQuery.slowEach( this, interval, callback );
};

包括上面的插件。它添加了一个slowEach方法和函数：$(...).slowEach(interval,callback)和$.slowEach(interval,delay,callback). 它迭代一个对象或 jQuery 选择，delay每次迭代后等待几毫秒。
从上面编辑您的代码以使用slowEach：

jQuery.slowEach(
slidesArray, 5000, function (index, value) {
  var linkHref = value[1];
  var imageSource = value[0];
   $("#slider").html("<a href='" + linkHref + "'><img src='" + imageSource + "'></a>").fadeOut(5000);
});

Answer 2

我没有测试过这个，但理论上应该可以

function fader(i){
    $("#slider").css('display', '');
    if (i == slidesArray.length){
        return;
    }
    var linkHref = slidesArray[i][1];
    var imageSource = slidesArray[i][0];
    i++;
    $("#slider").html("<a href='" + linkHref + "'><img src='" +
                      imageSource + "'></a>").fadeOut(5000, fader(i));
}
fader(0);

编辑：我已经测试过了，似乎工作正常。这是一个类似的使用演示

请注意，无需使用setTimeout

Answer 3

每次调用 $("#slider").html() 时，都会替换 #slider 的内容。

您要做的不是延迟实际循环，而是要延迟图像的放置[和褪色]。您可以使用 setTimeout 这样做：

jQuery.each (slidesArray,function(index,value) {

        var linkHref = value[1];
        var imageSource = value[0];;

        setTimeout(function() {
             $("#slider").html
             (
                "<a href='" + linkHref + "'><img src='"+ imageSource + "'></a>"
             ).fadeOut(5000);
        }, 2000 * index);
    }
);