jquery - Jquery 文本滑块循环

Question

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

设法想出这个。

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 */
}