jQuery中的菜鸟。
我正在尝试循环浏览图片库,目的是让图片淡入淡出。
这是我的JSFiddle
通过单击#gallery
每个图像fadeTo(arg1) 然后fadeTo(args2)。
但我希望他们一个接一个。
也许delay
应该将 a 添加到链中?
任何帮助将不胜感激。
jQuery 动画(就像 javascript 上的大多数东西一样)是异步的,这意味着函数调用在动作完成之前返回。从某种意义上说,您可以将$('img').each
循环的每次迭代视为如下:
this
绑定到一个img
元素fade
你的函数调用$(this)
然后,在所有迭代结束后,浏览器将开始在屏幕上同时播放动画(因为所有这些都已安排好)。
要创建顺序行为,您可以给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)
提供一个函数(恰好是它自己),应该在动画完成后调用