4

我在 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>

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

非常感谢任何帮助！

4

3 回答 3

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>
于 2012-11-26T19:44:53.887 回答
0

不确定您要问的确切问题，即为什么它不能在您的网站上运行。

但是，我认为您最好在#content 而不是在第一个 li 上触发 InOut。就目前而言，每次出现 li 时，您都会调用一个新的嵌套函数调用。如果它运行了很长时间，那就是有很多函数可以做一个函数可以做的事情。

也许如果你重写它，你可能会解决过程中的不运行问题:)

于 2012-11-26T19:46:57.587 回答
0

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

$(function() {
// Hide all the li's
$('#content li').hide();
// Call InOut to loop through them
InOut($('#content li:first'));
});
});
于 2014-02-21T09:41:21.997 回答