如何让这个 jQuery 动画代码永远循环? [英] How to make this jQuery animation code loop forever?
本文介绍了如何让这个 jQuery 动画代码永远循环?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在滑块上创建一个文本动画循环...我试过循环,但它没有工作..你能告诉我如何永远循环这个脚本..谢谢
i am trying to create a loop of text animations over a slider... i tried loop but it didnt work.. Can you please tell me how do i loop this script forever..thanks
<script>
$(document).ready(function() {
$("#header").hide();
var headerOne='I';
var headerTwo='Am';
var headerThree='So';
var headerFour='Cool';
$("#header").html(headerOne);
$("#header").fadeIn(1000);
$('#header').delay(1000).fadeOut(1000,function(){
$(this).html(headerTwo).fadeIn(1000);
$('#header').delay(1000).fadeOut(1000,function(){
$(this).html(headerThree).fadeIn(1000);
$('#header').delay(1000).fadeOut(1000,function(){
$(this).html(headerFour).fadeIn(1000).delay(1000).fadeOut(1000);
});
});
});
});
</script>
谢谢!
推荐答案
如果你稍微清理一下你的代码.您可以意识到不需要 setInterval
.只需使用最后一个回调来重复动画.
If you clean your code a bit. You can realize that setInterval
is not needed. Simply make use of the last callback to repeat the animation.
$(function () {
var $header = $("#header");
var header = ['I', 'Am', 'So', 'Cool'];
var position = -1;
!function loop() {
position = (position + 1) % header.length;
$header
.html(header[position])
.fadeIn(1000)
.delay(1000)
.fadeOut(1000, loop);
}();
});
这篇关于如何让这个 jQuery 动画代码永远循环?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文