我有一个简单的淡入淡出,我想无限期地进出。我找到了可以执行此操作的插件,但很好奇 jquery 是否已经有一个 Loop() api,这样我就可以在脚本中处理它。
<script type="text/javascript">
$(document).ready(function(){
$('.bottom-left').delay(1000).fadeIn(900);
$('.bottom-right').delay(3000).fadeIn(700);
});
</script>
最佳答案
如果您想使其变得复杂,那么这可能会变成很多代码,但简单的实现只需几行。基本上,您想要递归调用一个函数,该函数隐藏或显示动画函数的回调函数中的元素:
$(function () {
//declare a function that can fade in/out any element with a specified delay and duration
function run_animation($element, delay, duration) {
//animate fade in/out after delay
$element.delay(delay).fadeToggle(duration, function () {
//after fade in/out is done, recursively call this function again with the same information
//(if faded-out this time then next-time it will be faded-in)
run_animation($element, delay, duration);
});
}
//initialize the animations for each element, specifying a delay and duration as well
run_animation($('.bottom-left'), 1000, 900);
run_animation($('.bottom-right'), 3000, 700);
});
这是一个演示:http://jsfiddle.net/xpw4D/
.fadeToggle()
的文档:http://api.jquery.com/fadeToggle
更新
您可以稍微增强此代码并为两个以上的步骤设置动画,如下所示:
$(function () {
function run_animation(options) {
//initialize the count variable if this is the first time running and reset it to zero if there are no more steps
if (typeof options.count == 'undefined' || options.count >= options.steps.length) {
options.count = 0;
}
options.element.delay(options.steps[options.count].delay).fadeToggle(options.steps[options.count].duration, function () {
options.count++;
run_animation(options);
});
}
run_animation({
element : $('.bottom-left'),
steps : [
{ delay : 1000, duration : 100 },
{ delay : 500, duration : 900 },
{ delay : 3000, duration : 500 }
]
});
run_animation({
element : $('.bottom-right'),
steps : [
{ delay : 2000, duration : 200 },
{ delay : 1000, duration : 1800 },
{ delay : 6000, duration : 1000 }
]
});
});
关于jquery - 没有插件的脉冲 jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9422818/