13

我有两个引号包含在 H2 标记中，我想使用 jQuery 淡入和淡出。当页面加载时，我希望第一个报价淡入，延迟几秒钟并淡出，然后下一个报价做同样的事情。我希望它继续循环遍历这两个引号。任何帮助将不胜感激。

4

2 回答 2

47

你可以这样做：

CSS：

.quotes {display: none;}​

HTML：

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

Javascript：

// code gets installed at the end of the body (after all other HTML)
(function() {

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

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

    showNextQuote();

})();​

工作演示：http: //jsfiddle.net/jfriend00/n4mKw/

此代码适用于您拥有的任意数量的引号，而不仅仅是两个。如果引号后面有内容，您可能希望修复引号所在容器的大小，以便在从一个引号到下一个引号时它不会改变大小（导致其他页面内容跳来跳去） .

于 2012-08-22T01:45:43.140 回答
1

这是使上述脚本正常工作所需要的。首先，您需要引用适当的 JQuery 框架，因此将此脚本标记添加到该<head>部分中，或者在<body>标记的末尾，在所有其他元素之后：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

然后主 JavaScript 必须在上述<script>标记之后加载：

<script type="text/javascript">
(function() {

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

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

    showNextQuote();

})();
</script>
于 2013-10-30T09:10:09.873 回答