Question

以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.quotes {display: none;}
</style>
</head>

<body>
<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>

<script>
(function() {

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

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();
</script>
</body>
</html>

它按预期工作，它应该循环，但我想摆脱循环。如果有人可以提供帮助，我们将不胜感激。

编辑：我希望如此，一旦它达到第二个引用，它就不会消失并停留在那里。

Answer 1

正如您所评论的那样，您不想淡出最后一个引用，我认为只有if条件才能检查它是否是最后一个引用，如果是的话不要对fade-out说。

定义你的函数showNextQuote，如下文

 function showNextQuote() {
        ++quoteIndex;
        if(quoteIndex==quotes.length-1){ //if it's the last quote
            quotes.eq(quoteIndex).fadeIn(2000); //jsut fad-in & return
            return;
        }
        quotes.eq(quoteIndex)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

DEMO

没有循环就淡入淡出

1 个答案: