jquery animate-返回到原始位置

jquery animate - return to original position

本文关键字：原始 位置 返回 animate- jquery      更新时间：2023-09-26

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

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

如果再次点击该按钮，我希望能够将其返回到原始副本

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

有没有一种简单的方法可以做到这一点，或者我应该尝试实现一个基于变量状态的if语句？

您有两种方法

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'});
      }
    });
});

我认为这很容易：

<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>
相关文章：