【jQuery】手軽にアニメーション表示をおこなうanimate - チョッピーデイズ - EC事業支援・ECサイト立ち上げ・Webマーケティング・SEO・ホームページ制作・Web開発・アプリ開発・コーチングチョッピーデイズ

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 );