Jquery动画中的排队函数

Question

嗨，我试图创建一个分层的图像效果，但我有麻烦排队与jquery动画函数。

基本上我需要隐藏我所有的。bardiv然后执行函数之后，这将使他们在一个时间淡出。我需要这样做，因为会有多个图像，这个效果将在它们之间创建过渡。

<div class="container">
<div class="image">
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
</div>

CSS是这样的

.container {width:700px;height:400px;margin:0 auto;background:#FF0;}
.image {background:green; width:700px; height:300px; }
.bar { height:300px; width:50px; background:orange; float:left;}

javascript/jquery是这样的

$(function(){
var i = -1;
function fading(){
    function fader(){
    setTimeout(function () {          
          i++;                    
          if (i < 15) {          
             $('.bar:eq(' + i + ')').fadeIn('200');
             fader();           
          }                       
       }, 100)
    }
    fader()
}
$('input').click(function(){
    $('.bar').hide().queue(function(){
                    fading()
                    $('this').dequeue();
                    });
});

});

如果有人有什么想法可以用不同的方式做到这一点，或者用我的方式实现，那就太好了

Answer 1

你不能以这种方式使用动画队列，因为你的.queue调用与所有fadeIn()调用混合在一起，并且不会等到那些调用之后，因为它们也在使用动画队列。您可以创建一些单独的队列并使用它，但这可能不值得。

为什么不只是有fader()功能触发你的下一个行动时，它完成了15层?

或者，你可以传递一个回调函数到fader()，它可以在完成15层时调用?

我不知道你到底想做什么，但是你可以在这里启动另一个函数，当你完成了15层的褪色(见我添加的else):

function fading() {
    var cntr = -1;
    function fader() {
       setTimeout(function () {          
          cntr++;
          if (cntr < 15) {          
             $('.bar:eq(' + cntr + ')').fadeIn('200');
             fader();           
          } else {
             // done fading in the 15 items, now you can call some other function
             // here to start the next operation
             afterFade();
          }
       }, 100);
    }
    fader();
}

试着简化你的点击代码:

$('input').click(function(){
    $('.bar').hide();
    fading();
});

.hide()是同步的(它不使用动画队列)，所以你可以在它之后调用fading()。

您还必须在第二次调用fading()时重新初始化您的cntr变量。在上面的代码示例中，我将变量的名称从i更改为cntr，并将其定义和初始化移动到fading()函数的顶部，以便在每次后续调用时自动初始化。