jQuery反向动画步骤/切换

jQuery reverse animation steps / toggle

本文关键字：切换 动画 jQuery      更新时间：2023-09-26

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

迄今为止的代码http://jsfiddle.net/aYfUH/

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

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

我想这就是你需要的

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

查看更新的演示

好吧，这就是我最终解决它的方法。。。

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

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

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

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

相关文章：