Question

您好我正在尝试创建分层图像效果，但我无法将功能与jquery动画一起排队。

基本上我需要隐藏所有的.bar div然后执行函数，之后将使它们一次淡入一个。我需要这样做，因为会有多个图像，这种效果将创造它们之间的过渡。

<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的位置）：< / p>

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()函数的顶部，以便在每个后续时间自动初始化调用

在Jquery动画中排队函数

1 个答案: