1

jQuery中的菜鸟。

我正在尝试循环浏览图片库，目的是让图片淡入淡出。

这是我的JSFiddle
通过单击#gallery每个图像fadeTo(arg1) 然后fadeTo(args2)。
但我希望他们一个接一个。
也许delay应该将 a 添加到链中？

任何帮助将不胜感激。

4

1 回答 1

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 用浏览器安排动画，然后告诉它执行函数
  • 动画结束后，执行下一次迭代

更新了 jsFiddle

于 2012-10-03T03:00:30.223 回答