8

各ステートメント内にある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

では、次の値に進む前に、各「各」が完全に終了するのをどのように待つことができますか？

4

3 に答える 3

7

コールバック（現在の関数が終了したときに実行される関数）を使用する必要があります。これを行うには、次の.fadeOutようにします。

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

myFunctionは、fadeOutが完了するまで呼び出されません。$ .getを使用したAJAX呼び出しには、コールバック関数を含めることもできます。

これが機能する例ですが、もっと良い方法があると確信しています。

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); });
}

次に、document.readyで次のように呼び出します。

animate(theArray);
于 2010-01-30T16:20:40.430 に答える
1

divのリストを「循環」しようとしているようです。jQuery Cycleプラグインをチェックアウトしましたか？

于 2010-01-30T16:10:48.597 に答える
1

これはどうですか、関数内の配列内の各項目を調べてアニメーション化しますか？

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');
}
于 2010-01-30T16:41:25.360 に答える