Question

尝试将一个引用淡化到另一个引用，例如http://jsfiddle.net/jfriend00/n4mKw/ 但我只是看不出我哪里出错了，请有人借一双眼睛。谢谢！你可以在www.sarahluiz.net/index2.html看到它。这是我工作的细分。 Javascript放在

之前

</head><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>

HTML（我在这里添加了div）

<div align="center">
<h1>Hi, I'm Sarah Luiz</h1><h1 class="quote">Boy next door.</h1> 
<h1 class="quote">Girl next door.</h1>
<h1 class="quote">Money.</h1> 
<h1 class="quote">Kings.</h1><h1 class="quote">World Famous.</h1>
<h1 class="quote">Homeless.</h1><h1 class="quote">Back to Riches.</h1>
<h1 class="quote">Unstoppable.</h1> </div>

CSS

.quote{
display:none;
}

Answer 1

包含运行

的函数的jquery.js

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Answer 2

DEMO

 var quotes = $(".quote");


 .quote {
    display: none;
}

html中定义的.quote不是.quotes

Answer 3

您需要将此部件放在关闭的身体标签（身体末端）

之前

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

    var quotes = $(".quote"); 
    // this part ".quote" is the class selector so match this with the elements class
    var quoteIndex = -1;

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

    showNextQuote();

})();</script>

您将脚本放在head部分并立即执行。甚至在DOM初始化之前。所以你的javascript确实知道什么是＆＃34; .quotes＆＃34;

如果要将脚本保留在head部分中，但仍要等到元素初始化。然后你必须编辑你的代码......

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

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

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

    showNextQuote();

});
</script>

我建议您阅读Javascript基础知识。 Where to place Javascript in a HTML file?

还要检查是否添加了Rajesh提到的jquery库建议您不要在服务器上在线试用。学习在测试PC等上运行本地服务器/项目...... 还学习使用浏览器开发工具（Firebug，Chrome工具）调试这样的简单事情。

在Firefox上按Ctrl + Shift + K即可启动开发控制台。在Chrome上，Ctrl + Shift + J会显示开发控制台。查看并学习从那里调试错误。

我正在尝试使用javascript淡入淡出文本，没有onClick事件需要新的眼睛

3 个答案: