Question

I have an animation set to slide a DIV down when the DOWN link is clicked. I’d like to have the down link replaced by an UP link when the animation is ended so that the DIV can be returned. The JQuery to animate the DIV back to its starting position is set. The only thing I am having difficulty with is switching between the Down and Up DIVs.

Here’s the code http://jsfiddle.net/pC6fC/20/

Answer 1

You could specify the callback to be run once the animation is complete, like so:

var toggleButton = function () {
    $(".link, .link1").toggle();
};

/* Slides down alert banner */
$(function(){ 
    $(".link").click(function(){
        $(".box1").animate({'margin-top':150}, 500, toggleButton);
    });
});

/* Slides up alert banner */
$(function(){
    $(".link1").click(function(){
        $(".box1").animate({'margin-top':0}, 500, toggleButton);
    });
});

I also changed visibility: hidden to display: none on your CSS.

See the Fiddle.