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

あなたが尋ねている正確な質問、すなわちそれがあなたのサイトで機能していない理由についてはよくわかりません。

ただし、最初のliではなく#contentでInOutを起動する方がよいと思います。現状では、liが表示されるたびに、ネストされた新しい関数呼び出しを呼び出しています。それが長時間実行される場合、それは1つの関数が実行できることを実行するための多くの関数です。

たぶんそれを書き直せば、プロセスで実行されていない問題を解決できるかもしれません:)

于 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 に答える