Question

right now i have this

<script type='text/javascript'>

        $("#beau").click(function(){
        $("#beau").animate({"margin-Top": "738px"}, "fast");
        });

        </script>

and it works fine to drop the div down by changing “margin-Top” but what i want to do is when the user clicks it again it goes back up to a “margin-Top” of 700px and for it to repeat that over and over again. i think it’s pretty simple but I’ve only be doing bits of jQuery for about 5 days 🙂 so the heck if i know. but if you understand my question thank you for you’re replies :).

Answer 1

You can use .toggle():

$("#beau").toggle(function(){
    $(this).stop().animate({marginTop: 738}, "fast");
}, function() {
    $(this).stop().animate({marginTop: 700}, "fast");
});

I added a stop() just to make sure it doesn’t break the animation cycle if you click fast many times.