如何移动DIV's(侧边栏)与if/else检查

How to move DIV's (sidebar) with if/else checker?

本文关键字：if 侧边栏 检查 else 何移动 移动 DIV      更新时间：2023-09-26

在一个容器中有三个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时，两个侧边栏(。离开了,(右)DIV就位。我使用了以下代码:

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

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

我对Javascript相当陌生，在谷歌上阅读if/else示例只会让我更困惑。

帮忙吗?谢谢!

你可以依靠animate complete属性…

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"});
});
相关文章：