0

jQueryに少し問題があります。divに複数のテキストを表示しようとしています。これらのdivはフェードインとフェードアウトを示し、最終的に関数が再起動するはずです。

私は簡単な例を書き、それがいつ実行されるかを説明しました。それはうまく始まります...

  1. 1
  2. 2
  3. 三
  4. 四
  5. 五
  6. 六

関数がループすると、問題が始まります。次の順序で表示されます。

  1. 2
  2. 四
  3. 五
  4. 6を実行し、この順序で最初からやり直します。

理解できません。誰かが私を正しい方向に向けることができますか？

それがスクリプトです：

<html>
<head>
<script type="text/javascript" src="jquery151.js"></script>


    <script type="text/javascript">
$(document).ready(function() {
    function loop() {

    var fadeTime = 1000;
    var delayTime = 3200;       

    //if($('#layout4TextTitel').is(':visible') ) {
    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('one');
    });
    $('#layout4TextTitel').fadeIn(1000).delay(delayTime);


    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').html('two').fadeIn(1000).delay(delayTime);
    }); 

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('three');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('four');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('five');
    });
    $('#layout4TextTitel').fadeIn(fadeTime).delay(delayTime);

    $('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').empty().html('six');
    });
    $('layout4TextTitel').fadeIn(fadeTime).delay(delayTime);                                                    
     // Ende for-Schleife       

    } // Ende loop()

    for(var x = 0; x <=1000; x++) {
        loop();
    } // Ende for-Schleife

    });

</script>
</head>
<body>
<div id="layout4TextTitel"></div>
</body>
4

4 に答える 4

1 
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            function loop(x){
                var count_down = ["one","two","three","four","five","six"];
                if(x>=count_down.length)x=0;
                $('#layout4TextTitel').fadeOut(1000, function() {
                    $('#layout4TextTitel').empty().html(count_down[x]);
                });
                $('#layout4TextTitel').fadeIn(1000).delay(3200);
                setTimeout(function(){loop(x+1)},1000);
            }
            loop(0);
        });
    </script>
</head>
<body>
    <div id="layout4TextTitel"></div>
</body>

于 2012-08-26T19:00:06.600 に答える
0

ループは、1つのfadeInまたはfadeOutが終了するのにかかる時間よりも短い時間で1000回すべて実行されます。すでにアニメーション化されている要素に、もう一度アニメーション化するように指示しています。1秒以内に1000回。

setIntervalを使用してloop()、Xミリ秒ごとに1回実行します。

于 2012-08-26T18:17:39.053 に答える
0

jQueryにはアニメーションキューがあります。あなたはそれに物事を追加します、そしてそれらは将来いつか実行（アニメート）します。fadeOutここで、ループに6000回追加しfadeInますdelay。あまりエレガントではありませんが、うまくいくでしょう。しかし、コードに問題があります。

$('#layout4TextTitel').fadeOut(fadeTime, function() {
    $('#layout4TextTitel').html('two').fadeIn(1000).delay(delayTime);
});

他のスニペットとは異なり、ここでfadeInとdelayをfadeOutコールバックに追加します-すでにキューにある16000の他のすべてのアイテムの後に。fadeOutこれにより、キューに2つの連続したがあり、1つだけが実行されます。両方のコールバックが呼び出されますが、jQueryの古いバージョンでは、それらの順序が逆になっています（デモ;現在修正済み）-したがって、最初にhtmlを設定し、"three"その直後に"two"-「3」は表示されません。

于 2012-08-26T19:00:24.190 に答える
0

jQueryでのタイミングについては、jquery-timingを使用することをお勧めします。

そのプラグインを使用すると、コード全体が次のようになります。

var texts = ['one','two','three','four','five','six'];

function nextText(i) {
  this.html(texts[i % texts.length]);
}

$('#layout4TextTitel').hide().repeat(nextText)
  .fadeIn(1000,$).wait(3500).fadeOut(1000,$);

http://jsfiddle.net/creativecouple/VXgcw/でこの例を参照してください

于 2012-08-26T21:01:42.140 に答える