I want to be able to have the "hello" slide from the center to the right out of frame (and fade out) while at the same time have the "there" slide from the left to the center (and fade in) when the button is clicked. But I can't figure out how to achieve this without having the divs on separate lines.
我希望能够从中心向右滑动“你好”滑动(并淡出),同时让“从那里”滑动从左到中(并淡入)单击按钮。但我无法弄清楚如何在没有div分开的情况下实现这一点。
Ultimately I want to build a sliding menu that is controllable with "next" and "prev" buttons, so I figured I'd start with something small. Thank you!
最终我想构建一个可以通过“next”和“prev”按钮控制的滑动菜单,所以我想我会从一些小的东西开始。谢谢!
HTML:
<div id="test">
hello
</div>
<div id="test2">
there
</div>
<button id="next">
Next
</button>
</body>
JavaScript:
$(document).ready(function() {
$("#next").click(function() {
$("#test").hide("slide", {
direction: "right"
}, 1000);
$("#test2").show("slide", {
direction: "left"
}, 1000);
});
});
https://jsfiddle.net/qftqzr6f/
1 个解决方案
#1
2
You can position absolute these divs. See modified example.
你可以定位绝对这些div。见修改示例。
#wrapper{height:50px;position:relative}
#wrapper div{position:absolute;width:100%}
#1
2
You can position absolute these divs. See modified example.
你可以定位绝对这些div。见修改示例。
#wrapper{height:50px;position:relative}
#wrapper div{position:absolute;width:100%}