jquery animate - 返回原始位置

Question

I have a jquery animate that moves a div when a button is clicked:

<script> 
$(document).ready(function(){
    $("#toggle1").click(function(){
        $("#holder").animate({right: '0px'});
    });
});
</script>

If the button is clicked again I want to be able to return this back to the original opition

$("#holder").animate({right: '-250px'}); // off the screen

Is there a simple way of doing this or should I be trying to implement an if statement based on a variable state?

Answer 1

you have 2 ways

1st: use boolean for that

<script> 
$(document).ready(function(){
    var toggeled = true;
    $("#toggle1").click(function(){
      if(toggeled == true){
        $("#holder").animate({right: '0px'});
        toggeled = false;
      }else{
        $("#holder").animate({right: '-250px'});
        toggeled = true;
      }
    });
});
</script>

2nd: check for right

$(document).ready(function(){
    $("#toggle1").click(function(){
      if(parseInt($("#holder").css('right')) == 0){
        $("#holder").animate({right: '-250px'});
      }else{
        $("#holder").animate({right: '0px'});
      }
    });
});

Answer 2

I think that's quite easy:

<script type="text/javascript"> 
$(function(){
    var rightPos=0;
    $("#toggle1").on('click',function(e){
        e.preventDefault();
        $("#holder").animate({'right': rightPos+'px'});
        rightPos = rightPos == 0 ? -250 : 0;
    });
});
</script>