Jquery

Question

我正在制作一个网站，其中包含一些滑入屏幕的 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");
});

我需要让 'hidden' div 播放动画让他们走到最前面。如果 div 已经在前面，我只是不想播放动画。

这是我所拥有的fiddle：

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 就会在不被注意的情况下返回到 'right: -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");
 });

Answer 1

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

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

  };
});

编辑：
最初的 if 语句是错误的，因为 jQuery .css returns 后缀为 "px" 的值，之前它试图与“0%”匹配。

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

Answer 2

如果您希望一个事件只适用一次，请使用 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>

Answer 3

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

$(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 给出了答案，但我将其重新发布以供将来参考

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

Jquery - how to play .animate() once and reset it with other button

html

css

jquery-animate