我正在尝试创建一个推动动画,其中一个元素“推”另一个元素。
我在父div有4个divs我是想要推动动画的盒子,以及2个'按钮' divs 。 包装器div没有设置高度。
问题是,第二个盒子div被放置在第一个盒子div 。 我怎样才能让他们彼此左右对立,而不是彼此重叠。
另外,我需要动画的一些帮助。 我怎样才能得到一个盒子div来'推'另一个呢?
这就是我所说的“推”效应:
的jsfiddle
$(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>I am trying to create a push animation, where one element 'pushes' the other.
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.
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.
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:
JSFiddle
$(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 & #rightBox上使用display:inline-block将它们并排放置。 对于动画,用另一个div(#wrapper)包装它们并在点击时改变#wrapper的位置。
示例: 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' }); }); });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 .
Example: 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' }); }); });
更多推荐
div,background-color,divs,left,电脑培训,计算机培训,IT培训"/> <meta name=&quo
发布评论