JQuery одушевленного - вернуться в исходное положение

Question

У меня есть JQuery одушевленного, что перемещает DIV, когда нажата кнопка:

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

Если кнопка нажата снова, я хочу, чтобы иметь возможность вернуть это обратно к оригиналу Opition

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

есть простой способ сделать это, или я должен пытаться реализовать, если оператор, основанный на переменном состоянии?

Answer 1

у вас есть 2 способа

первый: использование булева для этого

<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> 

2: проверка для правого

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

Answer 2

Я думаю, что это довольно легко:

<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>