Очередь функции среди анимации Jquery - PullRequest
Новая
       10

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

0 голосов
/ 27 октября 2011

Привет! Я пытаюсь создать эффект многослойного изображения, но у меня возникают проблемы с добавлением функции в очередь вместе с анимацией 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();
                    });
});


});

Если у кого-то есть идеи о том, как это можно сделать по-другому или сделать так, как я изложил, это было бы здорово

1 Ответ

0 голосов
/ 27 октября 2011

Вы не можете использовать очередь анимации таким образом, потому что ваш вызов .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(), чтобы она автоматически инициализировалась при каждом последующем вызове.

...