2

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

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

这可行，但我希望块 1 淡出，而块 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);
}

谢谢你=)

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 回答