javascript Jquery：如何将一个 div 切换/滑动到另一个 div 上以取代它的位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25123726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery: how to toggle/slide one div over another so it takes its place?
提问by yarek
My goal is to to create an animation (css / jquery), so green box slides (grows) over red one (red one is fixed). Then toggle it back : green shrinks and red comes back again.
我的目标是创建一个动画（css/jquery），所以绿框在红色框上滑动（增长）（红色框是固定的）。然后将其切换回来：绿色缩小，红色再次回来。
Using ("#green").css("wdith") makes the red one being pushed and I want to avoid that.
使用 ("#green").css("wdith") 使红色被推送，我想避免这种情况。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<style>
.green {
width:400px;
background-color:green;
display:inline-block;
height:320px;
}
.red{
width:200px;
background-color:red;
display:inline-block;
height:320px;
}
</style>
<div>
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>
<script>
$(function() {
$("#action").click(function() {
// toggle so green grows and takes red place (red does not move)
// toggle so green shrinks and so red takes his initial place again
});
});
</script>
</div>
</body>
</html>
here is the fiddle:
这是小提琴：
回答by j08691
I'd use a float instead. Try this:
我会使用浮点数代替。试试这个：
.green {
width:400px;
background-color:green;
height:320px;
float:left;
}
.red {
background-color:red;
height:320px;
}
#container {
width:600px;
overflow:hidden;
}
<div id="container">
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>
</div>
<button id="action">Toggle Green !</button>
回答by Will
回答by holdera2
Here's what I did:
这是我所做的：
Like j08691 I also added float:left to both divs and I added display:block and clear both to the button, otherwise it would too be on the left
像 j08691 一样，我还向两个 div 添加了 float:left 并添加了 display:block 和 clear 到按钮，否则它也会在左侧
<body>
<style>
.green {
width:400px;
background-color:green;
float: left;
height:320px;
}
.red{
width:200px;
background-color:red;
float: left;
height:320px;
}
#action{
display: block;
clear:both;
margin-top:2em;
}
</style>
<div>
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>
</div>
<button id="action" >Toggle Green !</button>
Now what I did was make 2 different functions,to make sure the button wouldn't invoke both events I used the preventDefault(); method. I used animate to increase width and decrease the red using hide() to make it disappear, once you click on 'action' the green will disappear and the red div will take its place
现在我所做的是创建 2 个不同的函数，以确保按钮不会调用这两个事件，我使用了 preventDefault(); 方法。我使用动画来增加宽度并使用 hide() 减少红色使其消失，一旦你点击“动作”，绿色就会消失，红色 div 将取代它
<script>
$(document).ready(function() {
$("#action").one('click', toggleGreen);
// toggle so green grows and takes red place (red does not move)
function toggleGreen(){
$("#green").animate({
width:'600px'
});
$("#red").animate({
width:'100px'
}).hide(2000);
preventDefault();
}
$("#action").on('click', function(){
// toggle so green shrinks and so red takes his initial place again
$("#green").hide(2000);
$("#red").animate({
width:'600px'
}).show(3000);
})
});
</script>
Hope that helps!
希望有帮助！
