Question

我创建了一个DIV，其中3个不同的引号淡入淡出。

我在jQuery代码下使用相同的。

(function() {
var quotes = $(".changetxt");
var quoteIndex = -1;
function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
        .fadeIn(1000)
        .delay(4000)
        .fadeOut(500, showNextQuote);
}
showNextQuote();
})();

HTML CODE

<div class="toptext">
    <div class="changetxt">
        ”The simple act of paying positive attention to<br> 
        people has a great deal to do with productivity”
        <p>- Tom Peters</p>
    </div>

    <div class="changetxt">
        ”If you deprive yourself of outsourcing and your competitors<br> do not, you are putting yourself out of business”
        <p>- Lee Kuan Yew</p>
    </div>

    <div class="changetxt">
        ”Focus on being  PRODUCTIVE<br>
        instead of busy”
        <p>- Tim Ferris</p>
    </div>
</div>

它工作正常，但我不想循环，有3个引号，所以只要它显示最后（第三个）引用它就应该停止动画并且没有循环。

我怎样才能做到这一点？

Answer 1

在showNextQuote内部，而不是return，将quoteIndex设置为零。

function showNextQuote（）{ quoteIndex + = 1;

    **if (quoteIndex === 3) quoteIndex = 0;**

    quotes.eq(quoteIndex % quotes.length)
    .fadeIn(3000)
    .delay(4500)
    .fadeOut(500, showNextQuote);
}

Answer 2

检查quoteIndex是否在第三次执行中。如果是，则return

(function() {
    var quotes = $(".changetxt");
    var quoteIndex = -1;

    function showNextQuote() {
        if (quoteIndex == 2) {
            return;
        }
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(1000)
            .delay(4000)
            .fadeOut(500, showNextQuote);
    }
    showNextQuote();
})();

<强>更新

要保留最后一个报价，您可以使用另一种方法来有条件地拨打fadOut

(function() {
    var quotes = $(".changetxt");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(1000)
            .delay(4000);
        if(quoteIndex < 2){
            quotes.eq(quoteIndex % quotes.length).fadeOut(500, showNextQuote);
        }
    }
    showNextQuote();
})();

Answer 3

请不要在第三次之后调用该函数，如下所示：

(function() {
    var quotes = $(".changetxt");
    var quoteIndex = -1;

    function showNextQuote() {
        quoteIndex += 1;

        if (quoteIndex === 3) return;

        quotes.eq(quoteIndex % quotes.length)
        .fadeIn(1000)
        .delay(4000)
        .fadeOut(500, showNextQuote);
    }

    showNextQuote();
}());

在DIV中淡入和淡出文本 - 删除循环

3 个答案: