2

私は立ち往生していて、今はjQueryを本当に理解していません！

3つのブロックをループで3秒の遅延でフェードアウトさせたい。

これは機能しますが、ブロック2がフェードインしている間、ブロック1をフェードアウトさせたいのですが、その後はフェードインしません。

そして、ブロック2がフェードアウトし、ブロック3がフェードインします...など。

$(".block2").fadeTo("fast", 0.3)
$(".block3").fadeTo("fast", 0.3)

function1();

var timing = 3000;

function function1(){
$(".block1").fadeTo("slow", 1).delay(timing).fadeTo("slow", 0.3, function2);
}

function function2(){
$(".block2").fadeTo("slow", 1).delay(timing).fadeTo("slow", 0.3, function3);
}

function function3(){
$(".block3").fadeTo("slow", 1).delay(timing).fadeTo("slow", 0.3, function1);
}

ありがとう=）

4

3 に答える 3

3

すべてのブロックに共通のものを与えるだけです.block

jsBinデモ

var el = $('.block'),
    F = 800,   // FADE TIME
    P = 3000,  // PAUSE TIME
    S = -1;    // START el index (will turn 0 after initial kick)
    
function a(){el.eq(++S%el.length).fadeTo(F,1).siblings(el).stop(1).fadeTo(F,0.3);}
a();

setInterval(a, P);
于 2012-12-30T17:14:36.617 に答える
2

コールバックを使用しています。フェードアウトが完了するまで、コールバックは発生しません。ただし、タイムアウトを使用して両方を同時に呼び出すことができます。

$(".block2").fadeTo("fast", 0.3)
$(".block3").fadeTo("fast", 0.3)

function1();

var timing = 3000;

function function1(){
    $(".block1").fadeTo("slow", 1, function(){
         setTimeout(function(){
             function2();
         }, timing);
    }).delay(timing).fadeTo("slow", 0.3);

}

またはカレースタイル：

var function1, function2, function3;

function1 = fadeInnyOuty( $('.block1'), function2);
function2 = fadeInnyOuty( $('.block2'), function3);
function3 = fadeInnyOuty( $('.block3'), function1);

function fadeInnyOuty($elem,func){
    $elem.fadeTo("slow", 1, function(){
         setTimeout(function(){
             func();
             $elem.fadeTo("slow", 0.3);
         });
    });
}
于 2012-12-30T17:04:46.123 に答える
1

問題は、fadeOutアクションのコールバック関数を使用して次のステップをトリガーしていることです。したがって、次のfadeInは、fadeOutが完了した後に発生します。代わりに、遅延後にフェードインを発生させる必要があります。この方法を使用して、queueこれを実現できます。

.delay(timing).queue(function() {
  function2();
  $(this).dequeue(); // Keeps the queue running, it stops if you don't do this
}).fadeOut("slow", 0.3);

ここにフィドルを作成しましたhttp://jsfiddle.net/e8W5E/実際に動作することを示します

編集roXonのコメントに応えて、次のように、よりエレガントなソリューションを作成できます。HTMLが更新され、冗長なカウントが削除されます...

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

jQueryは次のようになります...

$(function() {

  // These are the elements we will rotate
  var $blocks = $(".block");

  // Set up the initial elements to 0.3 opacity
  $blocks.not(":eq(0)").fadeTo("fast", 0.3);

  // This is our repeating function
  var go = function($el, i, high, low, t) {
    $el.eq(i).fadeTo("slow", high)
      .delay(t)
      .queue(function() {

        // The next index is 1 + the current index
        // use modulus to repeat back to the beginning
        var next = (i + 1) % $el.length;
        go($el, next, high, low, t);
        $(this).dequeue();
       })
       .fadeTo("slow", low);
  };

  // Start fading in and out
  go($blocks, 0, 1, 0.3, 1000);

})();

そのクラス名で必要な数のブロックを追加でき、それはfadeInおよびfadeOutローテーションに含まれます。そしてフィドルhttp://jsfiddle.net/e8W5E/1/

于 2012-12-30T17:05:08.340 に答える