Очередь функции среди анимации Jquery

Question

Привет, я пытаюсь создать эффект многослойного изображения, но у меня возникают проблемы с очередью функции наряду с анимацией jquery.

По сути, мне нужно скрыть все мои div.bar, а затем выполнить функцию, после которой они будут постепенно исчезать по одному. Мне нужно сделать это таким образом, поскольку будет несколько изображений, и именно этот эффект создаст переход между ними.

<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() сразу после этого.

Вы также должны повторно инициализировать переменную cntr при втором вызове fading(), В приведенном выше примере кода я изменил имя переменной с i в cntr и переместил его определение и инициализацию в верхнюю часть fading() функция, поэтому она автоматически инициализируется при каждом последующем вызове.