jQuery文本滑块循环 [英] Jquery Text Slider Loop

问题描述

我一直在尝试创建一个文本滑块，在该滑块上淡入并滑入，然后淡入并滑出.然后下一个元素来做相同的事情.

I have been trying to create a text slider, where it fades and slides in and then fades and slides out. Then the next element comes and does the same thing.

设法解决这个问题.

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);

})

那里有那些延迟似乎有些琐碎?有没有更有效的方法?我该如何循环播放，以便不断循环播放.

Seems a bit trivial having those delays in there? Is there a more effective way and how can i loop this so it is constantly looping.

推荐答案

这不是最好的解决方案，但它会让您踏上正确的道路.

Not the best solution, but it will get you started on the right track.

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

这篇关于jQuery文本滑块循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！