-1

My code currently does both animations simultaneously.

  • Slidesdown
  • Animate div

I would like for the slideDown like animation to occur first, and when it is complete, do another animation.

NOTE: the first slideDown animation occurs once, while the remaining animations is reoccurring. i.e: clicking on other a tags.

p.s: I have tried doing the callback but it stops my remaining code from working due to me wanting do do the first slideDown animation once.

Please see jsFiddle DEMO for a proper demo.

Thanks in advance!

Please have a look at my code below. I have left comments for reference.

$(function() {
    var content = $('#content'),
        contentHeight = content.height(),
        nav = $('#nav'),
        count = 0;

    // on load content height is shorter
    content.height(100);

    nav.find('a').on('click', function() {

        var $this = $(this),
            parent =  $this.parent(),
            targetElement = $this.attr('href');

        //Does the slide down animation once        
        if (count === 0) {
            content.animate({'height': contentHeight });
            count = 1;
        }

        //only add active class if parent does not have it and then animate it
        if ( !parent.hasClass('active') ) {

            parent.addClass('active');

            //animate in
            $(targetElement).animate({
                left: '-=200px',
                'margin-left': '50%',
                opacity: 1
            }, 500);

            //Gets older clicked element
            var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');

            //only if old click element exists the do the animation
            if (oldClickedElement) {
                //animate out + reset to start
                $(oldClickedElement).animate({
                    left: 0,
                    'margin-left': '-50%',
                     opacity: 0
                }, 500, function() {
                     $(oldClickedElement).css({
                        'margin-left' : '100%',
                        left: 0
                    });
                });            
            }
        } 

        return false;
    });

});
1
  • Not sure why my question was voted down?
    – Shivam
    Jul 25, 2013 at 18:40

1 Answer 1

1

use a callback function to call the other animation after the slidedown

content.animate({'height': contentHeight },function() {
   //do other animation here, this function is called after the slidedown is finished.
});

jQuery .animate api reference

EDIT:

  if (count === 0) {
        content.animate({'height': contentHeight },function(){
           //Do only the animation code here
        });
        count = 1;
    } else {

    //only add active class if parent does not have it and then animate it
    if ( !parent.hasClass('active') ) {

        parent.addClass('active');

        //animate in
        $(targetElement).animate({
            left: '-=200px',
            'margin-left': '50%',
            opacity: 1
        }, 500);

        //Gets older clicked element
        var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');

        //only if old click element exists the do the animation
        if (oldClickedElement) {
            //animate out + reset to start
            $(oldClickedElement).animate({
                left: 0,
                'margin-left': '-50%',
                 opacity: 0
            }, 500, function() {
                 $(oldClickedElement).css({
                    'margin-left' : '100%',
                    left: 0
                });
            });            
        }
    }
  }
3
  • I have tried that before, but then the remaining of my code stops works. i.e: if you click on another a tag, nothing happens. example: jsfiddle.net/tV9z9/22 P.S: This is because the count variable is applied. Which only does animation once.
    – Shivam
    Jul 25, 2013 at 18:32
  • @Shivam, you dont need your entire othercode in the callback function, just the code to animate the div. put the rest of the code in an else statement so it doesnt get executed on the first run. Jul 25, 2013 at 19:03
  • Thanks Patrick! I don't know why I didn't think of this earlier. Thanks again for all your help! Its working now: jsFiddle
    – Shivam
    Jul 25, 2013 at 19:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.