Question

我在jsfiddle中使用以下代码：http://jsfiddle.net/S5Cjm/1242/

function InOut(elem) {
var delayOn = 2000, // time each <li> should be visible
    delayOff = 0, // time between revealing each <li>
    fade = 1000; // fade duration

// Pause, fade in, pause again, fadeout, then fire the callback
elem.delay(delayOff).fadeIn(fade).delay(delayOn).fadeOut(function() {
    // If we're not on the last <li>
    if (elem.next().length > 0) {
        // Call InOut on the next <li>
        InOut(elem.next());
    }
    else {
        // Else go back to the start
        InOut(elem.siblings(':first'));
        }
    });
}

$(function() {
    // Hide all the li's
    $('#content li').hide();
    // Call InOut to loop through them
    InOut($('#content li:first'));
});

但是，当嵌入到我的代码中时，它不起作用。

我在脑中引用了JQuery：

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

它曾莫名其妙地工作过一次，尽管复制了代码，但仍然没有。

任何帮助都非常感谢！

Answer 1

这适用于我：=）您的代码没有任何问题，除非您忘记将其包装在$(document).ready(function(){});

中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="author" content=""/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"   type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert('workin');
    function InOut(elem) {
    var delayOn = 2000, // time each <li> should be visible
    delayOff = 0, // time between revealing each <li>
    fade = 1000; // fade duration

// Pause, fade in, pause again, fadeout, then fire the callback
   elem.delay(delayOff).fadeIn(fade).delay(delayOn).fadeOut(function() {
    // If we're not on the last <li>
    if (elem.next().length > 0) {
        // Call InOut on the next <li>
        InOut(elem.next());
    }
    else {
        // Else go back to the start
        InOut(elem.siblings(':first'));
    }
    });
    }

    $(function() {
    // Hide all the li's
    $('#content li').hide();
    // Call InOut to loop through them
    InOut($('#content li:first'));
    });
    });
   </script>
   </head>
   <body>
       <ul id="content">
       <li>first</li>
       <li>second</li>
       <li>third</li>
       <li>fourth</li>
       <li>fifth</li>
       <li>sixth</li>
       </ul>
   </body>
   </html>

Answer 2

不确定您提出的确切问题，即为什么它无法在您的网站上运行。

但是，我认为你最好不要在#content而不是第一个li上解雇你的InOut。就目前而言，每次出现li时，都会调用一个新的嵌套函数调用。如果它运行了很长时间，那么很多函数都可以执行一个函数可以执行的操作。

也许如果你重写它，你可以解决过程中未运行的问题：）

Answer 3

尝试将这部分代码放在<ul>块下......这会有所帮助这部分代码应该在块之后：

$(function() {
// Hide all the li's
$('#content li').hide();
// Call InOut to loop through them
InOut($('#content li:first'));
});
});

JQuery，在jsfiddle工作的li元素的衰落循环，但不在现场

3 个答案: