3

リンクをクリックすると最初の div が左にスライドし、2 番目の div が左にスライドし、リンクが 2 番目の 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/

問題は、リンクをクリックしてスライド アニメーションを呼び出すと、2 番目の非表示の div が所定の位置にジャンプすることです。div poping/jumping 効果なしで左から右へスムーズなアニメーションを作成する方法はありますか?

ご協力ありがとうございました。

4

1 に答える 1

3

相対配置ラッパー内で絶対配置を使用します。

フィドルの例(更新)

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);
于 2013-04-25T18:50:59.443 に答える