2

jQuery UI のslideトグル効果を使用して div を切り替えています。

$("#link").click(function(){
    $("#targetDiv").toggle("slide", {direction: "up"}, 1000);
});

スライドは、私が望むアニメーションを持つ唯一の効果です。基本的には、div が上から下に来ます。toggleSlideそのようなことは要素の高さを変えるだけなので、私はしたくありません。

唯一の問題slideは、兄弟をすぐに最後の位置に押し込むことです: http://jsfiddle.net/XYDyy/2/

では、アニメーション div の調整に合わせて兄弟要素の位置を調整する方法はありますか?

アドバイスをいただければ幸いです。

4

1 に答える 1

4

jQueryが要素の周りに追加する上でslideUp()/を実行することで、それをごまかすことができます：slideDown().ui-effects-wrapper

$("#link").click(function() {
    if ($("#div1").is(':visible')) {
        $("#div1").toggle("slide", {direction: "up"}, 1000);
        $("#div1").parent(".ui-effects-wrapper").slideUp(1000);
    } else {
        $("#div1").toggle("slide", {direction: "up"}, 1000);
        $("#div1").parent(".ui-effects-wrapper").hide().slideDown(1000);
    }
});

デモ: http://jsfiddle.net/jtbowden/LARkS/

それ以外の場合は、独自のラッパーを追加slideUpして、 の位置を に#div1設定して、その上で を実行できますbottom: 0px。

デモ: http://jsfiddle.net/jtbowden/RDWt8/

于 2012-04-10T18:19:44.067 に答える