Jquery左右滑动使div向上跳动

Question

Jquery左右滑动使div向上跳动

3

我将尝试创建一个效果，当单击链接时，它会使初始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链接http://jsfiddle.net/rayshinn/abNmN/4/。问题在于，当我单击链接并调用幻灯片动画时，第二个隐藏的div会跳到相应的位置。有没有一种方法可以创建一个平滑的从左到右的动画，而不会出现div弹出/跳动的效果呢？谢谢您的帮助。

- BaconJuice

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pdegand59 · Accepted Answer

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

示例 (已更新)

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