ждать каждого jQuery - PullRequest
Новая
       22

ждать каждого jQuery

8 голосов
/ 30 января 2010

Я пытаюсь сделать div постепенным исчезновением, которое входит в каждое утверждение. Проблема заключается в том, что следующий элемент вызывается до того, как исчезнет / завершится. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>

<div id='one'>one</div>
<div id='two'>two</div>
<div id='three'>three</div>

<script>
$.each([ "one", "two", "three"], function() {
  console.log( 'start - ' + this );
  animate( this );
  console.log( 'end - ' + this );
});

function animate( id )
{
  box = '#' + id;

  $(box).fadeOut( 500, function( )
  {

    console.log('showing - ' + id);
    $(box).fadeIn( 500 );
    $(box).css('backgroundColor','white');

  });

}
</script>

консольные шоу - 

start - one
end - one
start - two
end - two
start - three
end - three
showing - one
showing - two
showing - three

Я бы хотел что-то вроде - 

start - one
showing - one
end - one
start - two
showing - two
end - two
start - three
showing - three
end - three

Так, как я могу ждать, пока каждый «каждый» будет полностью закончен, прежде чем перейти к следующему значению?

Ответы [ 3 ]

7 голосов
/ 30 января 2010

Вам нужно будет использовать обратные вызовы - функции, которые выполняются по завершении текущей функции. Чтобы сделать это с .fadeOut, вы должны сделать: 

$('#element').fadeOut( 400, myFunction );

myFunction не будет вызываться, пока fadeOut не будет завершен. AJAX-вызовы с $ .get также могут иметь функции обратного вызова.

Вот пример, который работает, хотя я уверен, что есть лучший способ: 

function animate(myArray, start_index) {

    // Stealing this line from Sam, who posted below.
    if(!start_index) start_index = 0;

    next_index = start_index+1;
    if(next_index > myArray.length) { return; }

    box = '#' + myArray[start_index]; 
    $(box).fadeOut(500, function() { animate(myArray,next_index); });
}

и затем в вашем документе. Вы уже позвоните: 

animate(theArray);
1 голос
/ 30 января 2010

Как насчет анимирования, просматривая каждый элемент в массиве в функции? 

var elements = [ "one", "two", "three"];
animate(elements);

function animate( elements, index )
{
    if(!index) index = 0;
    var box = '#' + elements[index];
    var $$box = $("#box");
    console.log( 'start - ' + elements[index] );
    $$box.fadeOut( 500, function( )
    {
        console.log('showing - ' + elements[index]);
        $$box.fadeIn( 500, function() {
            console.log( 'end - ' + elements[index] );
            if(elements[++index]) animate(elements, index);
        } ).css('backgroundColor','white');
    });
}

Вы можете даже вернуться к началу, если хотите: 

var elements = [ "one", "two", "three"];
animate(elements);

function animate( elements, index )
{
    if(!index) index = 0;
    var box = '#' + elements[index];
    var $$box = $(box);
    console.log( 'start - ' + elements[index] );
    $$box.fadeOut( 500, function( )
    {
        console.log('showing - ' + elements[index]);
        $$box.fadeIn( 500, function() {
            $$box.css('backgroundColor','white');
            console.log( 'end - ' + elements[index] );
            // go to next element, or first element if at end
            index = ++index % (elements.length);
            animate(elements, index);
        } );
    }).css('backgroundColor', 'aqua');
}
1 голос
/ 30 января 2010

Звучит так, будто вы пытаетесь "перебрать" список элементов div. Вы уже проверяли плагин jQuery Cycle ?

...