Question

I have a html structure that needs to animate on click. I have written the first half to achieve this but am unsure how to reverse these steps when the event handler is clicked again.

Code so far http://jsfiddle.net/aYfUH/

Also, is stacking the animate method like this the best way to achieve steps of an animation?

Answer 1

Well, this is how I solved it in the end…

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