jQueryのanimate
機能を利用できます。
$('#div1').stop().animate({
width:0,
opacity:0
}, 1000, function() {
$(this).remove();
});
これはまずstop()
、既存のアニメーションを停止するために呼び出します。次に、要素の幅と不透明度を 1000 ミリ秒で 0 にアニメートします。アニメーションが完了remove()
した後、最終的に を呼び出します。#div1
直後に再表示したい場合は、呼び出すremove()
必要はありません。appendTo()
この場合、次を使用します。
...
}, 1000, function() {
$(this).appendTo($(this).parent());
/* Remember that the width and opacity are still 0 here, so you'll need to revert the animation when re-displaying it */
});
これは、HTML マークアップが次のようなものであることを前提としています。
<div>
<div id="div1"></div>
<div id="div2"></div>
</div>
これはJSFiddle のデモです。