Question

我有一个jquery动画，当单击一个按钮时会移动div：

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

如果再次单击该按钮，我希望能够将其返回到原始选项

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

是否有一种简单的方法可以执行此操作，还是应该尝试基于变量状态实现if语句？

Answer 1

你有两种方式

1st：使用布尔值

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

第二名：检查是否正确

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

jquery animate - 返回原始位置

2 个答案: