1

フィドル

画面の上部にある色付きのボックスをクリックすると、ボックスと透かしをフェードアウトしてからフェードインしたいのですが、アニメーションが重ならないようにします。

私が抱えている問題は、透かし (大きな灰色のテキスト) がフェードインとフェードアウトを数回繰り返すことと、アニメーションが間違った順序で行われることです。同様の問題に関する他の投稿をいくつか見つけましたが、それらはすべて、アニメーション化される要素が #item1、#item2 などと呼ばれ、ループを使用していると想定しています。

編集：私がやったことは

function transition(text,title)
{
    $('.boxes').animate({opacity:0},400,"linear",function() {
        $('.watermark').animate({opacity:0},400,"linear",function(){
            $('.watermark').html(text);
            $('.watermark').animate({opacity:1},400,"linear",function(){
                $('.' + title).animate({opacity:1},400,"linear");
            });
        });
    });
}

fade* コールバックが動作しなかったのに、これらのコールバックが動作する理由がわかりません。

4

2 に答える 2

2

あなたが探していたものを正確に理解できたかどうかはわかりません。メソッドを使用するように例を更新しましたjQuery.when()- http://jsfiddle.net/jaredhoyt/xXbbX/8/

それが望ましい効果でない場合はお知らせください。

ちなみに、JavaScript ではAllmanスタイルよりも1TBSインデント スタイルを使用することを強くお勧めします。ほとんどの言語では好みの問題ですが、JavaScript では実際に危険な意味を持ちます。

于 2012-05-04T22:18:48.073 に答える
0

フェード インとフェード アウトの効果は、前のアニメーションが停止しなかったためです。独自のアニメーションを処理する前に、アニメーションが確実に停止するように、各アニメーションの前に停止を追加しました。

function transition(text,title)
{
    $('.boxes').stop().fadeOut(400,function()
    {
        $('.watermark').stop().fadeOut(400,function()
        {
            $('.watermark').html(text);
            $('.watermark').stop().fadeIn(400,function()
            {
                $('.'+title).stop().fadeIn(400);
            });
        });
    });
}



$(document).ready(function()
{

    $('li span').click(function()
    {
        var text = $(this).html();
        var title = $(this).attr('title');
        if(text == 'Show All')
        {
            text = "watermark";
        }

        transition(text,title);
    });
});
​
于 2012-05-04T22:21:00.693 に答える