【jQuery】手軽にアニメーション表示をおこなうanimate

jQueryのanimate()メソッドをもちいたアニメーション

jQueryのanimate()メソッドは、CSSの値を指定してアニメーションを表現します。

引数説明
properties型:PlainObject
最終的に変化させるCSSのキーと値のマップ値を指定します。
duration型:Number or String
初期値:400
アニメーションする時間を指定します。
easing型:String
初期値:swing
イージングの種類を指定します。
complete型:Function()
アニメーションが完了した時に実行したい処理を指定します。

1500ミリ秒かけて、不透明度を1に変化するアニメーションです。

<div class="box1">
   <img class="image1"  src="https://choppydays.com/wp-content/themes/understrap-child/img/img_web_choppydays.png">
<div>
$box1 = $(".box1");                      
$box1.find( ".image1" ).animate({   
       opacity: 0.5                      
   }, 1500 );                        

この記事のご感想やコメントはこちら

メールアドレスが公開されることはありません。 が付いている欄は必須項目です