Question

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

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

Answer 1

查看jQuery中的toggle()方法：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');
});

Look at the updated demo

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

到目前为止，我已在多个项目中成功使用过它。希望这会有所帮助。

jQuery反向动画步骤/切换

4 个答案: