jquery - JQueryはループと遅延でフェードします

Question

2つのDivを積み重ねています。

次のような非常に単純な関数が必要です。

a）3秒間待ってから、b）一番上のDivをフェードアウトして2番目のDivを表示しますc）もう一度3秒間待ってから、d）もう一度一番上のDivをフェードインしますe）もう一度ループバックします

誰かアドバイスはありますか？

どうもありがとう

Answer 1

これが試みです。

function foo() {
    jQuery("#mydiv").animate({opacity: 1.0}, {duration: 3000})
        .animate({opacity: 0}, {duration: 3000})
        .animate({opacity: 0}, {duration: 3000})
        .animate({opacity: 1.0}, {duration: 3000, complete: foo})
}

Note: To pause, just call animate over a property with the same target value as it is right now. The last animate calls the the same function as callback.

PS: Does it cause stack overflow over time?

Answer 2

2つのdivのIDが「id1」と「id2」で、id2が上位の場合、コードは次のようになります。

function fadeIn() {
  $("id2").animate({opacity:0},500);
  setTimeout(fadeOut,3500);
}

function fadeOut() {
  $("id2").animate({opacity:1},500);
  setTimeout(fadeIn,3500);
}

function startAnim() {
  setTimeout(fadeIn,3000);
}

startAnim（）は、アニメーションサイクルを開始します。これは、@startと呼ぶ必要があります。次に、fadeInとOutは、id2をアニメーション化し、相互にタイムアウトを設定し続けます。3秒の遅延（つまり3000ms）と前のアニメーションを完了するための500が必要だったため、遅延は3500です。これは、animateのコールバックを使用して実行できた可能性がありますが、それはもっと面倒です。

Answer 3

これがあなたが探しているものです（私は思う）。順序付けられていないリストを使用しますが、div に切り替えるか、以下で行ったようにリスト項目の中に div を配置することができます。

これがjQueryです...

$(document).ready(function() {

     var j = 0;
     var delay = 2000; //millisecond delay between cycles
     function cycleThru(){
             var jmax = $("ul#cyclelist li").length -1;
             $("ul#cyclelist li:eq(" + j + ")")
                     .animate({"opacity" : "1"} ,400)
                     .animate({"opacity" : "1"}, delay)
                     .animate({"opacity" : "0"}, 400, function(){
                             (j == jmax) ? j=0 : j++;
                             cycleThru();
                     });
             };

     cycleThru();

});

...そしていくつかの開始CSS...

ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px}
ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute}

すでに HTML を持っていますが、例が必要な場合に備えて...

<ul id="cyclelist">
  <li><div>First Div</div></li>
  <li><div>Second Div</div></li>
  <li><div>Third Div</div></li>
</ul>

私はこれを称賛したいと思いますが、それはCSS-Tricks http://css-tricks.com/snippets/jquery/cycle-through-a-list/から直接です

Answer 4

誰もこれを見ることはないかもしれませんが、念のため...

<script>
$(document).ready(function() {
       $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
});
</script>

これはループせずに....

それは

<script>
$(document).ready(function() {
    function animate(){
        $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
        $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);    
    }
    animate();  
    setInterval(animate, 10000);
}); 
</script>

Answer 5

xfadeも使用したい場合。floyedのスクリプトを使用しますが、使用した変更を加えます。唯一の問題は、表示したい最初の画像がli要素の2番目の画像である必要があることです。

$(document).ready(function() {

         var j = 0;
         var delay = 5000; //millisecond delay between cycles
         function cycleThru(){
                 var jmax = $("ul#cyclelist li").length -1;
                 $("ul#cyclelist li:eq(" + j + ")")
                         .animate({"opacity" : "1"} ,1000)
                         .animate({"opacity" : "1"}, delay);
             $("ul#cyclelist li:eq(" + j + ")").next().animate({"opacity" : "1"} ,1000);    
             $("ul#cyclelist li:eq(" + j + ")")
                         .animate({"opacity" : "0"}, 1000, function(){
                                 (j == jmax) ? j=0 : j--;
                                 cycleThru();
                         });
                 };

         cycleThru();

 });

Answer 6

この試行では、jquery.com の小さなクックブック関数の待機を使用します。

関数 doFading は、トップ div の ID が「a4」であると想定しています。

function doFading() {
      $("#a4").wait(3000)
      .fadeOut("slow")
      .wait(3000)
      .fadeIn("slow",doFading);
    }

$.fn.wait = function(time, type) {
        time = time || 1000;
        type = type || "fx";
        return this.queue(type, function() {
            var self = this;
            setTimeout(function() {
                $(self).dequeue();
            }, time);
        });
    };

Answer 7

これが古いことは知っていますが、これを達成するために何をしたかを共有すると思いました

$(document).ready(function() {
    var delay = 500;
    $("#mydiv").bind('fadein', function()
    {
        $(this).fadeOut(1000, function()
        {
            $(this).delay(delay).trigger('fadeout');
        });
    });

    $("#mydiv").bind('fadeout', function()
    {
        $(this).fadeIn(1000, function()
        {
            $(this).delay(delay).trigger('fadein');
        });
    });

    $("#mydiv").fadeIn(1000, function()
    {
        $(this).trigger("fadein");
    });
});

次に、停止したいときにこれを呼び出します

$("#mydiv").stop().hide();