我有一些div,我想使用jquery的每个方法来循环访问div,并希望在每个div上单独应用效果,一个接一个。为了更清楚,我想将潜水淡入 0.5(不透明度),然后延迟(300),然后再次淡入淡出到 1(不透明度),但我希望每个div 一个接一个地这样做。谁能告诉我正确的方法。谢谢。
代码在小提琴中。
var obj = $('.box');
var i = 0;
LoadSequence();
//recursive for all the items.
function LoadSequence() {
obj.eq(i++).fadeTo('1000', 0.1).delay(300).fadeTo('1000', 1, LoadSequence);
};
小提琴:http://jsfiddle.net/NHdB6/6/
我不久前做了一个lil'插件。这可能会有所帮助:
演示:http://jsfiddle.net/elclanrs/9Zxew/
(function ($) {
$.fn.fade1by1 = function (options) {
var opt = $.extend({
'delay' : 500,
'speed' : 500,
'ease' : 'swing' // Other requires easing plugin
}, options);
var that = this;
for (var i = 0, d = 0, l = that.length; i < l; i++, d += opt.delay) {
that.eq(i).delay(d).fadeIn(opt.speed, opt.ease);
}
};
})(jQuery);
我一直认为最好使用动画完成函数而不是多个不同的协调计时器,因为它保证了顺序性。 以下是我的做法:
function fadeElementsSequential(selector) {
var elems$ = $(selector);
var i = 0;
function next() {
if (i < elems$.length) {
elems$.eq(i++).fadeTo(1000, 0.5).delay(300).fadeTo(1000, 1, next);
}
}
next();
}
fadeElementsSequential(".box");
这是一个工作演示:http://jsfiddle.net/jfriend00/BW6YF/
注意:我在演示中更改了不透明度值,只是为了让它更加明显。