javascript - jQuery反向动画步骤/切换

Question

我有一个 html 结构，需要在点击时进行动画处理。我已经编写了前半部分来实现这一点，但我不确定当再次单击事件处理程序时如何反转这些步骤。

到目前为止的代码http://jsfiddle.net/aYfUH/

另外，像这样堆叠动画方法是实现动画步骤的最佳方法吗？

Answer 1

查看toggle()jQuery 中的方法：http: //api.jquery.com/toggle/

Answer 2

嗯，这就是我最终解决它的方法......

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 3

我知道我迟到了，但是对于新来的人，这里有一个我不久前制作的小 jQuery 插件，它支持反向动画：

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

到目前为止，我已经在几个项目中成功使用了它。希望这可以帮助。

Answer 4

我觉得这就是你需要的

一些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');
});​

查看更新的演示