使用CSS和jQuery淡入淡出_Jquery_Html_Css_Fadein_Fadeout

使用CSS和jQuery淡入淡出

jquery html css

使用CSS和jQuery淡入淡出,jquery,html,css,fadein,fadeout,Jquery,Html,Css,Fadein,Fadeout,下面是我应用的完整HTML代码，用于同时生成两个引号fadein和FadeOut。。它在jfiddle中工作，但在我的网页上不工作。谁能告诉我怎么了下面是JFIDLE：下面是HTML代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmln

下面是我应用的完整HTML代码，用于同时生成两个引号fadein和FadeOut。。它在jfiddle中工作，但在我的网页上不工作。谁能告诉我怎么了

下面是JFIDLE：

下面是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>


无标题文件
.quotes{显示：无；}
第一句话
第二句话
（功能（）{
var报价=$（“.quotes”）；
var quoteIndex=-1；
函数showNextQuote（）{
++报价索引；
quotes.eq（quoteIndex%quotes.length）
fadeIn先生（2000年）
.延迟（2000年）
.fadeOut（2000年，showNextQuote）；
}
showNextQuote（）；
})();

添加：

在你的头或身体标签

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


无标题文件
.quotes{显示：无；}
第一句话
第二句话
（功能（）{
var报价=$（“.quotes”）；
var quoteIndex=-1；
函数showNextQuote（）{
++报价索引；
quotes.eq（quoteIndex%quotes.length）
fadeIn先生（2000年）
.延迟（2000年）
.fadeOut（2000年，showNextQuote）；
}
showNextQuote（）；
})();

添加：

在你的头或身体标签

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


无标题文件
.quotes{显示：无；}
第一句话
第二句话
（功能（）{
var报价=$（“.quotes”）；
var quoteIndex=-1；
函数showNextQuote（）{
++报价索引；
quotes.eq（quoteIndex%quotes.length）
fadeIn先生（2000年）
.延迟（2000年）
.fadeOut（2000年，showNextQuote）；
}
showNextQuote（）；
})();

我复制并粘贴了您的完整代码。。。它仍然不起作用。我正在使用Mac和浏览器Chrome和safari。这是一个问题吗？刚刚修复了我的答案，请重试。：-）成功了！将在计时器用完时接受答案。你能告诉我哪里出了问题吗？首先你没有包括jQuery。在那之后，在关闭主体之后出现了一个奇怪的Unicode符号。我复制并粘贴了完整的代码，就像您所做的那样。。。它仍然不起作用。我正在使用Mac和浏览器Chrome和safari。这是一个问题吗？刚刚修复了我的答案，请重试。：-）成功了！将在计时器用完时接受答案。你能告诉我哪里出了问题吗？首先你没有包括jQuery。在那之后，在关闭主体后出现了一个奇怪的Unicode符号。你能用更具体的方式问你的问题吗。你试过什么。你认为错误在哪里？你能找到一种更具体的方式来问我的程序有什么问题吗？你能用一种更具体的方式问你的问题吗。你试过什么。你认为错误在哪里？你能找到一个更具体的方法来问我的程序有什么问题吗？