Question

我正在努力让5个div永远循环进出。 div将有类“text1”“text2”“text3”等。这段代码有什么问题吗？它似乎不起作用。

$(document).ready(function(){
    var num = 1
    while(num =< 5) {
        $('.text' + num).fadeIn().delay(4000).fadeOut()
        var num = num ++i

        if(num == 5) {
            var num = 1
        }
        else{
            var num = num
        }
    }
});

Answer 1

那将无限循环。 .delay不会暂停执行，它只是设置一个稍后调用的函数。您的代码将fadeOut设置为4秒后无限次调用。

您想要setInterval代替：

<div class="textContainer">
    <div>Text 1</div>
    <div>Text 2</div>
    <div>Text 3</div>
    <div>Text 4</div>
    <div>Text 5</div>
</div>

$(document).ready(function() {
    var i = 0;
    var divs = $('.textContainer div');
    setInterval(function() {
        divs.eq(i).fadeOut();
        i = (i + 1) % divs.length;
        divs.eq(i).fadeIn();
    }, 4000);
});

Answer 2

利用fadeOut方法中的回调函数：

$(document).ready(function() {
    function fader(i) {
        $('div.text' + i).fadeIn('slow')
            .delay(4000).fadeOut('slow', function() {
                fader(i % 5 + 1);
            });
    }

    fader(1);
});

http://jsfiddle.net/mblase75/NXuVM/2/

Jquery / Javascript循环div滚动条

2 个答案: