javascript - javascript .hide 方向変更

Question

jQuery には hide() 関数があります。

このように非表示機能に期間を追加すると

$('#myclass').hide(1000);
<div id="myclass">
    <p>yolo</p>
</div>

下から始まり、1 秒間で上にアニメーション化されます。

私の質問は、開始する方向をどのように変更できるかです。

Answer 1

のドキュメントから.hide( duration )：

継続時間、単純なオブジェクト、または「完全な」関数が提供される.hide()と、アニメーション メソッドになります。この.hide()メソッドは、一致した要素の幅、高さ、不透明度を同時にアニメーション化します。これらのプロパティが 0 になると、displayスタイル プロパティが に設定されnone、要素がページのレイアウトに影響を与えないようにします。

要素は左上隅に配置されているため、上下にのみアニメーション化されているように見えます。

別の方向にアニメーション化するには、別のコーナーに配置する必要があります。

#myclass {
    position: absolute;
    bottom: 0;
    right: 0;
}

例: http://jsfiddle.net/W7hqy/

Answer 2

これを試して。

$('div').on('click', function(){
    $(this).animate({
        width: 0
    });
});

デモ: http://jsfiddle.net/e6BBA/1/

Answer 3

hide メソッドでこれを行うことはできませんjQueryを使用すると仮定すると、animate を使用する必要があります

$('element').animate({
    marginLeft: '-400px'
}, '5000',  function(){ 
    $(this).hide() 
});

デモ: http://jsfiddle.net/e6BBA/