淡入淡出CSS和jQuery

Question

Here's the complete HTML code that i applied to make 2 quotes fadein and fade out simultaneously .. it works in jfiddle but not on my webpage. 这是我用来使两个引号同时淡入和淡出的完整HTML代码。它在jfiddle中有效，但在我的网页上不起作用。 Can anyone tell me whats wrong? 谁能告诉我怎么了？

Here's the jfiddle: here 这是jfiddle：这里

and here's the HTML Code: 这是HTML代码：

        <!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>
    <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

Add: 加：

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

in your head or body tag. 在您的头部或身体标签中。

<!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>
<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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

淡入淡出CSS和jQuery

问题描述

1 个解决方案

解决方案1
5 已采纳 2013-04-14 09:29:10

淡入淡出CSS和jQuery

问题描述

1 个解决方案

解决方案1 5 已采纳 2013-04-14 09:29:10

解决方案1
5 已采纳 2013-04-14 09:29:10