问题描述
我正在尝试创建推式动画,其中一个元素推动"另一个.
I am trying to create a push animation, where one element 'pushes' the other.
我在父级div
中有4个divs
,其中2个是希望进行推送动画的框,还有2个按钮" divs
.包装器div
没有设置高度.
I have 4 divs
in a parent div
2 are boxes that I want the push animation happening on, and 2 'button' divs
. The wrapper div
doesn't have a set height.
问题是,第二个框div
被放置在第一个框div
下.我如何才能使它们彼此左右对齐,而不是彼此重叠.
The problem is, the second box div
gets placed under the first box div
. How can I get them to be right and left of each other, not one on top of the other.
我还需要一些动画方面的帮助.我如何获得一个盒子div
来推"另一个盒子?
Also, I need a bit of help with the animation. How can I get one box div
to 'push' the other?
这就是推"效应的意思:
This is what I mean by 'push' effect:
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#leftBox').animate({
left: '-200px'
});
$('#rightBox').animate({
left: '-200px'
});
});
$('#rightBtn').click(function() {
$('#leftBox').animate({
left: '200px'
});
$('#rightBox').animate({
left: '200px'
});
});
});
#wrapper {
width: 400px;
background-color: chocolate;
margin: auto;
overflow: hidden;
}
#leftBox,
#rightBox {
width: 400px;
height: 100px;
display: inline-block;
position: relative;
}
#rightBox {
left: 400px;
}
#leftBtn,
#rightBtn {
width: 200px;
height: 30px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div><div id="rightBox" style="background-color: darkkhaki;">Bye Bye
</div><div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div><div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
推荐答案
您可以在#leftBox
&上使用display:inline-block
#rightBox
使其并排放置.对于动画,请用另一个div(#wrapper)
和&更改#wrapper
的位置.
You can use display:inline-block
on #leftBox
& #rightBox
to place them side by side. For animation, wrap them with another div(#wrapper)
& change the position of #wrapper
on click .
示例: JSFiddle
HTML:
<div id="wrapper">
<div id="slider">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div>
<div id="rightBox" style="background-color: darkkhaki;">Bye Bye
</div>
</div>
<div id="buttons">
<div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div>
<div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
</div>
JS:
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#slider').animate({
left: '-400px'
});
});
$('#rightBtn').click(function() {
$('#slider').animate({
left: '0px'
});
});
});
这篇关于并排放置元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!