Jquery - 如何播放 .animate() 一次并用其他按钮重置它答案

【问题标题】：Jquery - how to play .animate() once and reset it with other buttonJquery - 如何播放 .animate() 一次并用其他按钮重置它
【发布时间】：2017-02-26 20:57:52
【问题描述】：

我正在制作一个网站，其中包含一些可滑入屏幕的 div。当按下相应的按钮时，如何使已经在前面的 div 不播放动画？

我为每个 div 设置 jQuery，如下所示：

$(button).click(function(event) {
  $(div).css("right", "-100%");
  $(div).animate({right: '0%'});
  $(div).css("z-index", "1");
  $(other-div).css("z-index", "0");
});

我需要让“隐藏”的 div 播放动画以使它们出现在最前面。如果 div 已经在前面，我只是不想播放动画。

这是我所拥有的：

https://jsfiddle.net/cn6goeuq/

我曾尝试像这样使用 .delay()：

$(button).click(function(event) {
  $(div).animate({right: '0%'});
  $(div).css("z-index", "1");
  $(other-div).css("z-index", "0");
  $(other-div).delay(2000).css("right", "-100");
});

这样隐藏的 div 就会返回到“正确：-100%”而不被注意，但它不起作用。不知道为什么。

我还尝试使用一个变量来帮助我激活和停用正在显示但也是徒劳的 div 的动画。我想要这样的东西：

var x = 0;
var y = 0;

  $(button1).click(function(event1){
      $(div1).animate({right: '0%'});
    x++;
    y=0;
    if (x >= 1) {
      $(this).off(event1);
  }
  });

  $(button2).click(function(event2){
      $(div2).animate({right: '0%'});
    y++;
    x=0;
    if (y >= 1) {
      $(this).off(event2);
    }
  });

我想让 event1 在按下 button1 时只工作一次，如果按下其他按钮则重置，但它也不起作用。

我没有办法解决这个问题！

编辑

恐怕使动画有条件也不起作用。我得到了完全相同的结果。我尝试根据 z-index 使其有条件。像这样：

$(button).click(function(event) { 
  if($(div).css('z-index') !== '0'){ 
    $(div).css("right", "-100%");
    $(div).animate({right: '0%'});
  };
  $(div).css("z-index", "1");
  $(other-div).css("z-index", "0");
 });

【问题讨论】：

标签： jquery html css jquery-animate

【解决方案1】：

我猜你可以让动画以它是否已经有一个等于right: 0%的css属性为条件，例如：

$(button).click(function(event) {
  if($(div).css('right') != '0px'){
     $(div).css("right", "-100%");
     $(div).animate({right: '0%'});

  };
});

编辑：
最初的 if 语句是错误的，因为 jQuery .css 返回带有后缀“px”的值，并且之前尝试与“0%”匹配。

这是解决 if 语句问题并允许在应用不同 z-index 的元素之间切换的更新小提琴：https://jsfiddle.net/cn6goeuq/3/

【讨论】：

恐怕使动画有条件不起作用。我得到了完全相同的结果。我还尝试根据 z-index 使其有条件。像这样： $(button).click(function(event) { if($(div).css('z-index') !== '0'){ $(div).css("right", " -100%"); $(div).animate({right: '0%'});}; $(div).css("z-index", "1"); $(other-div). css("z-index", "0"); });
@Chris.s 是的，它运行良好。事实证明我以某种方式错误地使用它。我只是使用 z-index 作为条件，因为它在网站本身的整个 div 中更加一致。我使用了我在上次编辑时在问题中发布的代码，但略有改动。
@JoseSoares 实际上结果证明我的 if 语句也不起作用，因为 css 将值返回为“0px”，这意味着 =! “0%”是错误的。我已经更新了这个小提琴来处理它，并且只在 z-index 之间切换（所以你可以在 div 之间切换）：jsfiddle.net/cn6goeuq/3

【解决方案2】：

在我上次的编辑中，我犯了一个错误。答案很简单：

$(button).click(function(event) { 
  if($(div).css('z-index') !== '1'){ 
    $(div).css("right", "-100%");
    $(div).animate({right: '0%'});
  };
  $(div).css("z-index", "1");
  $(other-div).css("z-index", "0");
});


$(other-button).click(function(event) { 
  if($(other-div).css('z-index') !== '1'){ 
    $(other-div).css("right", "-100%");
    $(other-div).animate({right: '0%'});
  };
  $(other-div).css("z-index", "1");
  $(div).css("z-index", "0");
});

据我了解，它基本上是说“如果 div 的 z-index 不是 1，它会播放动画”，这正是我想要的。

@Chris 给出了答案，但我将其重新发布以澄清以供将来参考

【讨论】：

【解决方案3】：

如果您希望某项活动只能使用一次，请使用 one，它的作用类似于 on，但只能使用一次：

$(document).ready(function() {

 function animateRed(){
    $("#redDiv").animate({
      right: '0%'
    });
    $("#redDiv").css("z-index", "1");
    $("#yellowDiv").css("z-index", "0");
 }
 
 function animateYellow(){
  $("#yellowDiv").css("right", "-100%");
    $("#redDiv").delay(1000).css("right", "-100%");
    $("#yellowDiv").animate({right: '0%' });
    $("#yellowDiv").css("z-index", "1");
    $("#redDiv").css("z-index", "0");
 }

  $("#redButton").one('click', function() {
     animateRed()
  });

  $("#yellowButton").one('click', function() {
    animateYellow();    
  });
  
  $("#yellowButton").click(function(){
     $("#redButton").one('click', function() {
     animateRed()
     });
  })
  
  $("#redButton").click(function(){
     $("#yellowButton").one('click', function() {
     animateYellow()
     });
  })

  $("#back").click(function(event) {
    $("#yellowDiv").animate({
      right: '-100%'
    });
    $("#redDiv").animate({
      right: '-100%'
    });
    $("#yellowDiv").css("z-index", "0");
    $("#redDiv").css("z-index", "0");
    $("#yellowButton").one('click', function() {
     animateYellow()
     });
     $("#redButton").one('click', function() {
     animateRed()
     });
    
  });

});

#redDiv {
  position: absolute;
  width: 100%;
  height: 50px;
  right: -100%;
  background-color: red;
  z-index: 0;
}

#yellowDiv {
  position: absolute;
  width: 100%;
  height: 50px;
  right: -100%;
  background-color: yellow;
  z-index: 0;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<body>

  <div id="redButton">RED</div>
  <div id="yellowButton">YELLOW</div>
  <div id="back">BOTH BACK</div>
  <div id="redDiv"></div>
  <div id="yellowDiv"></div>

</body>

【讨论】：

我也想过这个选项，但我需要能够播放任意多次。我只是不想在 div 位于“前面”时播放动画。
如果你能看到我发布的小提琴，当你按下红色时，它会播放动画，你可以看到红色的 div。但是，如果您再次按 RED，它会再次播放动画，但不需要这样做。我希望这有任何意义