jQuery-アニメーション-
jQueryObject.fadeIn( );
jQueryObject.fadeOut( );
ブラウザ上の表示↓
◉最初は、フェイドインするピンクのみの表示
更新すると、緑がフェイドアウトででてくる
数値は「ミリ秒:1/1000秒」
※何もしていない場合は、400ミリ秒で動く
■アニメーション終了時にjavaScriptを実行させる■
jQueryObject.fadeIn(400, function( ){
alert(' フェードイン完了 ');
});
■slideDown/SlideUp■
jQueryObject.slideDown( );
jQueryObject.slideUp( );
数値は「ミリ秒:1/1000秒」
※何もしていない場合は、400ミリ秒で動く
↓アニメーション終了時にJavaScriptを実行させる
■animate■
jQueryObject.animate( {
プロパティ名:値;
});
HTML↓
<body>
<div id="div1">box</div>
</body>
CSS↓
<style>
#div1 {
background: #8ceb63;
position: absolute;
top: 0;
left: 0;
padding: 50px;
}
</style>
Script↓
<script>
$(function( ){
$('#div1').animate({
top: 200,
left: 400
});
});
</script>
※スピードの設定
jQueryObject.animate({
top: 200;
left: 400;
}, 1000);
※アニメーション終了時にJavaScriptを実行させる
jQueryObject.animate({
top: 200,
left: 400
}, 400, function( ){
alert('アニメーション終了完了')
});