Question

I have this situation:

$("#button").toggle(function(){
    $("#window").animate({top:'0%'},1000);
},function(){
    $("#window").animate({top:'-100%'},1000);
});

but I need change it to work with .click event, like this:

$("#button").click(function(){

if #window position is top:'0%', animate to top:'-100%'

if #window position is top:-100%', animate to top:'0%'

and when the user clicks multiple times on the #button does not get the animation to repeat itself

Please suggest.

Answer 1

This SHOULD work!!

 $("#button").click(function(){
     if($("#window").css('top') == '0%'){
       $("#window").stop().animate({top:'-100%'},1000);
     };
     if($("#window").css('top') == '-100%'){
        $("#window").stop().animate({top:'0%'},1000);
     };
 });

Make sure your css has this:

​#window{
   position: absolute;
   top:0%;   /* -100% as the default case may be */
}​

Working fiddle here: http://jsfiddle.net/dNPWg/
Click on the red bar for animation (change the -100% to 100% for better understanding of whether .stop() is working or not)