Jquery文本滑块循环

我一直在尝试创建一个文本滑块，它会淡入并滑入，然后淡出并滑出。 然后下一个元素出现并做同样的事情。

管理得出这个。

http://jsfiddle.net/3JKkj/6/

$(document).ready(function() { $('#heading1').css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000); $('#heading1').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000); $('#heading2').css({opacity: 0}).delay(7000).animate({opacity: 1.0,left: "50px"}, 1000); $('#heading2').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000); $('#heading3').css({opacity: 0}).delay(14000).animate({opacity: 1.0,left: "50px"}, 1000); $('#heading3').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000); $('#heading4').css({opacity: 0}).delay(21000).animate({opacity: 1.0,left: "50px"}, 1000); $('#headings4').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000); }) 

在那里有那些延迟似乎有点微不足道？ 有没有更有效的方法，我怎么能循环这个，所以它不断循环。

Answer 1

不是最好的解决方案，但它会让你开始走上正轨。

http://jsfiddle.net/3JKkj/20/

 var heading_cur=0;//current header function showHeading(){ $('#heading'+(heading_cur+1)).css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000); setTimeout(hideHeading, 5000);//hide it in 5 seconds } function hideHeading(){ $('#heading'+(heading_cur+1)).css({opacity: 1}).animate({opacity: 0,left: "-50px"}, 1000 ,function(){ showHeading();//show the next when this has completed }); heading_cur=(heading_cur+1)%4; } $(document).ready(function() { showHeading();//start the loop }) 

CSS

 #heading1,#heading2,#heading3,#heading4{ position:absolute; left:0; opacity:0;/* Initial state */ }