Question

我被困住了，我现在真的不喜欢jQuery！

我希望我的3个模块在一个循环中以3秒的延迟淡出淡出。

这有效，但我希望第1块淡出WHILST第2块正在淡入，而不是之后。

第2块淡出WHILST第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);
}

谢谢=）

Answer 1

只需为所有区块提供一个共同的.block

jsBin demo

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);

Answer 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);
         });
    });
}

Answer 3

问题是您正在使用fadeOut操作的回调函数触发下一步。因此，fadeOut完成后会发生下一个淡入淡出。相反，你希望fadeIn在延迟之后发生。您可以使用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/

jquery在淡出的同时淡入淡出

3 个答案:

jsBin demo