Question

所以我在一个容器中有三个DIV，就像这样：

<div class="container">
  <div class="left">left</div>
  <div class="center">click me</div>
  <div class="right">right</div>
  <div class="spacer"></div>
</div>

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}

.left, .center, .right {
  position: relative;
  border: 1px solid black;
  float: left;
  padding: 10px;
}

.left, .right {
  width: 25%;
}

.center {
  width: 50%;
}

.right {
  right: -999px;
  transition: right 0.5s ease-out;
}

.left {
  left: -999px;
  transition: right 0.5s ease-out;
}

.spacer {
  clear: both;
}

我已经对它进行了编码，这样当你点击.center DIV时，两个侧边栏（.left＆amp; .right）DIV就会移动到位。我用了这段代码：

$('.center').click(function(){
      $('.right').animate({"right": "0"});
      $('.left').animate({"left": "0"});
    }
});

我想要做的是写它，以便在它们移动到位后，我可以再次点击.center DIV，它们会像边栏一样移出。我的想法是使用if / else检查器，以便它知道DIV的状态。

我对Javascript很新，在Google上阅读if / else示例只会让我更加困惑。

有任何帮助吗？谢谢！

Answer 1

您可以依赖animate完整属性......

http://api.jquery.com/animate/

编辑：我已更新以匹配您的代码...

$( ".center" ).click(function() {
  $( ".right" ).animate({"right": "0"}, 5000, function() {
    // Place the code you want to perform once animation is complete here.
  });
});

这里有几个选项 - 您可以在动画完整块中设置一个标志，例如......

 var complete = false;
 $( ".center" ).click(function() {
  $( ".right" ).animate({"right": "0"}, 5000, function() {
    complete = true;
  });
});

根据评论编辑...

$('.center').click(function(){
      $('.right').animate({"right": "100px"});
      $('.left').animate({"left": "100px"});
});

如何使用if / else检查程序移动DIV（侧边栏）？

1 个答案: