2

jQuery UIを使用してスライディングdivを作成していますが、問題があります。

浮いたままの外側のDIVと2つの内側のDIVがあります。最初の内側のDIVには、スライド効果があります。

<div id="outer">
    Outer Div
    <p><a href="#" id="SlideOut">Slide Out</a></p>
    <p><a href="#" id="SlideIn">Slide In</a></p>

    <div id="inner">inner</div>
    <div id="inner2">inner2</div>
</div>

    $("#SlideOut").click(function(){
    $("#inner").hide("slide",{direction: 'left'},1000);
});

$("#SlideIn").click(function(){
        $("#inner").show("slide",{direction: 'left'},1000);

});

問題は、2番目のDIVが最初のDIVに従わないことです。

説明するのは難しいので、ここに私の問題をよりよく理解できるフィドルがあります。 http://jsfiddle.net/xFx26/1/

つまり、2番目の内部divが最初の内部divと一緒にスライドすることを望んでいます。

4

4 に答える 4

4

animate()スライドさせるのではなく、幅を使用して変更する必要があります。スライドはコンテンツをスライドさせてから、実際のコンテナを非表示にします。フィドルを更新しました。

コード：

$("#SlideOut").click(function(){
    $("#inner").animate({width: 0},1000);
});

$("#SlideIn").click(function(){
     $("#inner").animate({width: 200},1000);
});
于 2013-02-08T17:12:30.817 に答える
0

以下のようにjqueryにinner2を追加する必要があると思いますか？これは、あなたの望むことですか？

$("#SlideOut").click(function(){
$("#inner").hide("slide",{direction: 'left'},1000);
$("#inner2").hide("slide",{direction: 'left'},1000);
});

$("#SlideIn").click(function(){
    $("#inner").show("slide",{direction: 'left'},1000);
$("#inner2").show("slide",{direction: 'left'},1000);

});
于 2013-02-08T17:12:30.957 に答える
0

これをスライドアウトに追加します（スライドインでは反対に追加します）

    $("#inner2").css("position","relative").animate({left:-200},990,function()  {$(this).css("left","")});

しかし、さらに良い位置を置く：cssに相対的＆jsから削除

于 2013-02-08T17:12:50.990 に答える
0

animatedivを右から左に移動させるために使用する必要があります。

$("#SlideOut").click(function () {
    $("#inner").hide("slide", {
        direction: 'left'
    }, 1000);
    $("#inner2").animate({
        marginLeft: "-=250px",
    }, 1000);
});

http://jsfiddle.net/xFx26/5/SlideOutをクリックします

于 2013-02-08T17:18:15.640 に答える