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

编辑：我已经测试过，似乎正在运行。这是一个similar use demo

请注意，无需使用setTimeout

Answer 3

每当你拨打$（＆＃34;＃slider＆＃34;）。html（），你就会替换#slider的内容。

你想要做的事情不是延迟实际的循环，你想要延迟图像的放置[和淡化]。你可以使用setTimeout这样做：

jQuery.each （ slidesArray，函数（指数，值） {

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

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

如何淡出淡出？

3 个答案: