javascript - jQueryリバースアニメーションステップ/トグル

Question

クリック時にアニメーション化する必要のあるhtml構造があります。これを実現するために前半を作成しましたが、イベントハンドラーが再度クリックされたときにこれらの手順を元に戻す方法がわかりません。

これまでのコードhttp://jsfiddle.net/aYfUH/

また、このようなアニメーションメソッドをスタックすることは、アニメーションのステップを達成するための最良の方法ですか？

Answer 1

toggle()jQueryのメソッドを確認してください：http： //api.jquery.com/toggle/

Answer 2

私はこれがあなたが必要なものだと思います

一部のCSSが変更されます

.ticker-holder {
    position:relative;
    height:52px;
}

.ticker-holder .ticker {
    width:100%;
    float:left;
    top:0px;
    z-index:0;
    overflow:hidden;
}

.ticker .full {
    height:250px;
    width:960px;
    padding:10px 10px 0px 10px;
    background-color:blue;
    display:none;
}

.ticker-holder .ticker .mini {
    height:30px;
    width:980px;  
    background-color:#000000;    
}​

Javascript

$('.expand').on('click', function(e) {
    e.preventDefault();
    $ticker = $('.ticker');
    $tickerFull = $ticker.find('.full');
    $tickerMini = $ticker.find('.mini');

    $tickerFull.slideToggle('slow');
});​

更新されたデモを見てください

Answer 3

さて、これが私が最終的にそれを解決した方法です...

function () 
        {
        $ticker = $('.ticker');
        $tickerFull = $ticker.find('.full');
        $tickerMiniExpand = $ticker.find('.expand');
        $tickerMini = $ticker.find('.mini');

        $tickerMiniExpand.on('click', function(e) 
            {
            if ($('.expand.closed').length) 
                {
                $(this).removeClass('closed');
                $(this).addClass('open');
                e.preventDefault();

                $ticker.animate(
                    {
                        top: -30
                    }, 150, function() 
                    {
                        $ticker.animate(
                        {
                            'z-index': 1000,
                    }, 0, function() 
                        {
                        $ticker.animate(
                        {
                            top: 0,
                            height: 331
                        }, 0, function() 
                            {
                            $tickerFull.animate(
                                {
                                    top: 0
                                }, 
                                {
                                    duration:350 
                                });
                            $tickerMini.animate(
                                {
                                    top: 279
                                }, 
                                { 
                                    duration:350 
                                });
                        }); // 2nd animate
                    }); // 1st animate
                }); // click
            } else {
                $(this).removeClass('open');
                $(this).addClass('closed');
                e.preventDefault();

                $tickerMini.animate(
                    {
                        top: 0
                    }, 
                        {
                            duration:200, queue: false 
                        });
                $tickerFull.animate(
                    {
                        top: -279
                    }, 
                        {
                            duration:200, queue: false 
                        });
                $ticker.animate(
                    {
                        top: -30,
                        height: 52
                    },
                        {
                            duration:350, queue: true 
                        })
                .animate(
                    {
                        'z-index': 0,
                    },
                        {
                            duration:0, queue: true 
                        })
                .animate(
                    {
                        top: 0
                    }, 
                        {
                            duration:200 
                        })
                };
            });
        }

Answer 4

私はパーティーに遅れていることを知っていますが、新参者のために、リバースアニメーションのサポートをもたらす少し前に作成した小さなjQueryプラグインがあります：

https://github.com/ZiadJ/jquery.reversible

私はこれまでいくつかのプロジェクトでそれをうまく使用してきました。お役に立てれば。