Question

jQuery中的Noob。

我正试图在图像库中循环，目标是使图像淡入淡出。

这是我的JSFiddle
点击#gallery每张图片fadeTo（arg1）然后点击fadeTo（args2）。
但我希望他们一个接一个地去也许应该在链中添加delay？

非常感谢任何帮助。

Answer 1

jQuery动画（因为javascript上的大多数内容）都是异步的，这意味着函数调用在动作完成之前返回。从某种意义上说，您可以将$('img').each循环的每次迭代视为以下内容：

jQuery调用您的函数，this绑定到一个img元素
您的函数在fade

$(this)

jQuery然后要求浏览器安排要运行的动画
您的函数返回

然后，在所有迭代结束后，浏览器将开始在屏幕上同时显示动画（因为所有迭代都已安排）。

要创建顺序行为，您可以为fade函数提供回调：

$('#gallery').click(function(evt) {
  var remainingImages = $("img").toArray();

  var processNext = function() {
    var image = remainingImages.shift();
    if(!image) return;

    // Add the next iteration as a callback to the animation
    $(image).fadeTo(500, .3).fadeTo(250, 1, processNext);
  };

  processNext();
});

然后，不是一次安排所有动画，而是会发生这样的事情：

所有当前img元素都存储在remainingImages数组
调用processNext函数，从数组中删除第一个图像
该函数调用fade上的$(image)，提供一个在动画完成后应该被称为的函数

jQuery使用浏览器安排动画，并告诉它之后执行该功能

动画结束后，执行下一次迭代

Updated jsFiddle

无法使用jquery选择在图库中循环

1 个答案: