无法使用jquery选择在图库中循环
在jQuery中的Noob。
我正试图在图像库中循环，目标是使图像淡入淡出。
这是我的JSFiddle
通过点击#gallery每个图像fadeTo（arg1）然后点击fadeTo（args2）。
但我希望他们一个接一个地去。
也许delay应该添加到链中？
任何帮助将不胜感激。
jQuery动画（就像javascript上的大多数东西一样）是异步的，这意味着函数调用在动作完成之前返回。 从某种意义上说，你可以想到$('img').each的每次迭代$('img').each循环如下：
- jQuery调用你的函数绑定到一个
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函数，从数组中删除第一个图像 - 函数调用
$(image)上的fade，提供一个在动画结束后应该调用的函数（恰好是它本身） - jQuery使用浏览器调度动画，并告诉它之后执行该函数
- 动画结束后，执行下一次迭代
更新了jsFiddle