1

これが私が試した2つの例ですが、どちらも意図したとおりには機能しません。

http://jsfiddle.net/AndyMP/atyWW/1/およびhttp://jsfiddle.net/AndyMP/atyWW/4/

私がやりたいのは、上のブロックをフェードアウトし、下のブロックをアニメーション化/スライドさせます。最初の例では、上部のブロックが非表示になった後に所定の位置にジャンプし、2番目の例では、コンテナDIVの下部にスペースを残します（おそらく、上部のDIVを非表示にしていないためです）。

どんな助けでも大歓迎です。

4

3 に答える 3

3

問題は、トップがすでに0になっているため、これをアニメートしても何も起こらないことです。スキップする理由は、hideを呼び出しているためです。

一番上の要素の不透明度が0に変更されたら、次のように一番上の要素の高さを変更できます。もちろん、最初のアニメーションが終了する前に2番目のアニメーションを開始する必要がある場合を除いて、遅延ではなくコールバックを使用することをお勧めします。その場合、遅延に固執しますが、次のコードは、ここからどこに進むべきかの例を示しています。

$(".disappear").click(function(){
    $(".top").fadeTo(250,0, function() {
        $(".top").animate({height:0},600);
    });
});

jsFiddle添付

または、上部の要素を非表示にして上部の要素の高さをアニメーション化する代わりに、下部の要素のマージン上部をアニメーション化することもできます。

于 2012-07-25T14:37:14.497 に答える
1

それを試してください：

$(function(){ 
    $(".disappear").click(function(){
        $(".top").fadeOut(250,function(){
            $(".middle").animate({top:0}, 600);
        });

    });
});

そのcssで：

.top {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 400px;
    background: green;
}
.middle {
    position: absolute;
    left: 0;
    top: 40px;
    height: 200px;
    width: 400px;
    background: red;
}

ライブデモ： http： //jsfiddle.net/atyWW/19/

于 2012-07-25T14:40:13.477 に答える
1

このコードを追加して、コンテナの高さを調整します-$(".container").animate({height:$(".middle").height()},600);

http://jsfiddle.net/atyWW/26/

編集：いくつかの説明-@Jon Taylorの答えは、正確に何が起こるかを説明しています。私が提供したコードは、コンテナーの高さを設定しますが、一番上のDIVはまだ中央のdivの後ろにあります。オーバーフロープロパティを非表示ではなく自動に設定していて、上部が中央よりも高い場合は、スクロールバーが表示されることに注意してください（とにかくjQueryで削除できます）。この例を確認してください。

最後の例のコードに注意してください$top.height()。40pxにハードコーディングする代わりに、値を取得するために使用します。CSSを変更するために更新を続ける必要はありません。

于 2012-07-25T14:45:26.487 に答える