jquery 淡入与淡出同时进行

Question

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

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

这可行，但我希望 block 1 在 block 2 淡入时淡出，而不是之后淡出。

block 2 淡出，而 block 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 一个通用的 .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);