如何使用if/else检查器移动DIV(侧边栏)？
如何使用if/else检查器移动DIV(侧边栏)？
提问于 2014-08-06 21:10:25
所以我在一个容器里有三个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;
}我已经对它进行了编码，这样当您单击DIV时，两个侧边栏(.left和.right) .center就会移动到适当的位置。我使用了以下代码：
$('.center').click(function(){
$('.right').animate({"right": "0"});
$('.left').animate({"left": "0"});
}
});我想要做的是编写它，以便在它们移动到适当的位置后，我可以再次单击.center DIV，它们将像侧栏一样移动。我的想法是使用if/else检查器，这样它就可以知道DIV处于什么状态。
我是Javascript的新手，在Google上阅读if/else示例只会让我更困惑。
有什么帮助吗？谢谢!
回答 1
Stack Overflow用户
发布于 2014-08-06 21:17:13
您可以依赖动画完成属性...
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"});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25161329
复制相关文章
相似问题
腾讯云开发者
