crossline

jQuery-アニメーション-

font-size:12px;line-height: 150%;

 

 

jQueryObject.fadeIn( );

jQueryObject.fadeOut( );

 

f:id:ishuko:20140618011609p:plain

 

ブラウザ上の表示↓

 

 

f:id:ishuko:20140618011839p:plain

 

◉最初は、フェイドインするピンクのみの表示

更新すると、緑がフェイドアウトででてくる

f:id:ishuko:20140618011849p:plain

数値は「ミリ秒:1/1000秒」

何もしていない場合は、400ミリ秒で動く

 

 

 

■アニメーション終了時にjavaScriptを実行させる■

 

jQueryObject.fadeIn(400, function( ){

alert(' フェードイン完了 ');

});

 

f:id:ishuko:20140618012039p:plain

 

 

 

■slideDown/SlideUp■

 

jQueryObject.slideDown( );

jQueryObject.slideUp( );

 

 

f:id:ishuko:20140618013040p:plain

 

 

 

数値は「ミリ秒:1/1000秒」

何もしていない場合は、400ミリ秒で動く

 

↓アニメーション終了時にJavaScriptを実行させる

 

f:id:ishuko:20140618012515p:plain

 

 

 

■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('アニメーション終了完了')

});