Question

我正试图让它在实时环境中运行：http://jsfiddle.net/LREwC/

这是我设置的测试HTML页面：

<head>
<title>1</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
</head>
<body>
<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>
<p class="quotes">first quote</p>
<p class="quotes">second quote</p>
<p class="quotes">third quote</p>
</body>

由于某种原因，它不能在实时环境中工作，但它在JSfiddle中运行良好。我是否在发布代码时出错了？

CSS和JS脚本文件正确链接。我测试了链接直播，我只是缩短了它，所以它没有链接到我正在处理的网站。

Answer 1

您必须等待所有dom元素准备就绪：

jQuery(function($) {

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

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

    showNextQuote();

});

另一种选择是将脚本移动到文档的末尾。

让渐变过渡在实时环境中工作

1 个答案: