Question

我尝试创建一种效果，当点击链接时，它会使初始div向左滑动，并显示第二个div向左滑动，当从第二个div点击链接时div会滑动到右边第一个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 Link与我目前所拥有的http://jsfiddle.net/rayshinn/abNmN/4/

问题在于，当我点击链接并调用幻灯片动画时，第二个隐藏的div跳转到位。有没有办法可以从左到右创建一个平滑的动画，而没有div弹出/跳跃效果？

感谢您的帮助。

Answer 1

在相对定位的包装中使用绝对定位。

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);

Jquery从左到右滑动使div在幻灯片上跳跃

1 个答案: