jQuery：高さのジャンプ/シフトを伴うアニメーション

Question

DOMからelemntsを削除できる関数を作成しようとしていますが、私は解決できない問題に直面しています。

コードは次のようになります。

function closeMessage(message) { 
    var height = $(message).outerHeight(); 
    $(message).fadeTo("fast", 0.01).animate({marginTop: -height, marginBottom: 0}, function(){ 
     $(message).remove(); 
    }); 
} 

変数messageが削除される要素です。 CSSの中で私はmargin-topとmargin-bottomをメッセージ要素に割り当てました。

上記の関数を実行すると、メッセージ要素は0.01％の不透明度（=ほとんど見えませんが、まだそこにあります）にフェードしてから、負のマージンがメッセージ要素の下の内容が上にスライドするという効果を作り出します。その後、コールバックでmessage-elementがDOMから削除されます。

メッセージエレメントの下のコンテンツは、小さなぎりぎりのように、最後の数ピクセルを上にジャンプするという問題があります。 1つ以上のメッセージボックスが存在する場合にのみ、このような現象が顕著になります。マージンが大きくなるほど、目立つようになります。あなたが見ることができるように、私はmarginBottom: 0で問題を解決しようとしましたが、うまくいきません。

また、outerHeight();,outherHeight(true);およびinnerHeight();のような異なるheight();の機能を試しましたが、それでも問題は解決しませんでした。

私の質問は：上記のコードに何か間違っていますか？なぜアニメーションの最終段階でその小さな「ジャンプ」がありますか？これは正常な動作ですか？

Answer 1

最初の問題はouterHeightがそれにtrueを通過することなく、アカウントの余白に入れていないということです。

var height = $(message).outerHeight(true); 
$(message).fadeTo("fast", 0.01).animate({marginTop: -height, marginBottom: 0}, function(){ 
    $(message).remove(); 
}); 

第二の問題は、CSSの定義によるということです隣接する要素の垂直マージンが崩壊します。つまり、下マージンは次の要素の上マージンと重なります。これにより、上下の余白のすべてが常に同じでない限り、計算がより困難になります。

編集：私が思うあなたが負のマージンや、本当に奇妙な何も持っていない限り、動作するはずです以下：

function closeMessage(message) { 
    var pBot = 0; 

    if ($(message).prev().length) { 
     pBot = parseInt($(message).prev().css('marginBottom')); 
    } 

    var height = $(message).outerHeight(); 
    $(message).fadeTo("fast", 0.01).animate({ 
     marginTop: -height-pBot+'px', 
     marginBottom: pBot+'px' 
    }, 'linear', function() { 
     $(message).remove(); 
    }); 
} 

これは、その上部余白を崩壊遠ざかっている要素になりますが、その上の要素のマージンを無効にし、要素の高さ（マージンなし）を引いて要素を「消える」ようにし、同時にその下のマージンを上の要素と同じに設定します。それは消える。それはうまくいくように見えます。次のものが自動的に処理されるので、前のマージンについて心配する必要があります。

例：何が起こっているかを確認するのに役立ちますhttp://jsfiddle.net/FxR9M/

私自身の例：http://jsfiddle.net/5PRy2/2/

Answer 2

jQueryアニメーション関数は、swingという既定のイージング関数を使用します。 「リニア」イージング機能を使用するようにコードを変更してみてください。

$(message).fadeTo("fast", 0.01).animate({marginTop: -height, marginBottom: 0},'linear', function(){ 
     $(message).remove(); 
    }); 

ドキュメントをチェックアウトhere