jquery从左到右滑动使div跳到幻灯片
我试图创建一个效果,当一个链接被点击时,它使初始div滑动到左侧,并显示第二个div滑动到左侧,当链接是点击从第二个div div滑向右侧,第一个div也向右滑动。jquery从左到右滑动使div跳到幻灯片
这里是我到目前为止的代码
HTML
<div id="box1">
<a href="#" id="click1">Click to show other div</a>
<br>
Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.
</div>
<div id="box2" style="display:none">
<a href="#" id="click2">Click to show other div</a>
<br>
Ut accumsan dignissim lorem non posuere.Aliquam iaculis nibh ultricies sem amet.Class aptent taciti sociosqu ad posuere.
</div>
JS
$(document).ready(function() {
$('#click1').click(function() {
$('#box1').hide("slide", {
direction: "left"
}, 1000);
$('#box2').show("slide", {
direction: "right"
}, 1000);
});
$('#click2').click(function() {
$('#box2').hide("slide", {
direction: "right"
}, 1000);
$('#box1').show("slide", {
direction: "left"
}, 1000);
});
});
这里是的jsfiddle链接与我有什么到目前为止http://jsfiddle.net/rayshinn/abNmN/4/
的问题是,当我点击链接并调用第二个隐藏div j的幻灯片动画进入到位。有没有一种方法可以在没有div弹出/跳跃效果的情况下从左至右创建流畅的动画?
谢谢你的帮助。
在相对定位的包装中使用绝对定位。
Fiddle exemple(更新)
HTML
<div id="wrapper">
<div class="slidingDiv" id="box1">...</div>
<div class="slidingDiv" id="box2" style="display:none">...</div>
</div>
CSS
#wrapper {
position:relative;
}
#wrapper div {
position:absolute;
top:0;
}
的Javascript自动高度计算
var maxHeight = 0;
$('.slidingDiv').each(function() {
if($(this).height() > maxHeight) maxHeight = $(this).height();
});
$('#wrapper').height(maxHeight);
伟大的解决方案!然而,由于#wrapper div {position:absolute}属性,包装器中的所有div现在似乎都堆叠在一起。有关此修复的任何想法?再次感谢。 – BaconJuice 2013-04-25 19:07:23
问题是,当您使用position:relative与绝对定位的元素相对时,包装器的高度不是由浏览器设置的。您有2个解决方案来解决此问题。 第一个是为包装的样式添加一个固定值。第二个是添加一个小脚本,它会根据包装器内部组件的大小自动计算包装器的高度。我将用第二种解决方案编辑我的帖子。 – pdegand59 2013-04-25 19:51:00
完美作品,谢谢! – BaconJuice 2013-04-26 15:35:41
谢谢@BaconJuice! – 2015-10-05 14:16:28