【jQuery】animateメソッドで要素をグリっと動かしてみる【アニメーション】

プログラミング
Photo by Max Chen on Unsplash

シュテル(@sterchannel2020)です!

せっかくjQuery勉強してるのでもっとグリっと動くやつ覚えたいなぁ…

確かにおっしゃる通りですね。

では今日はわかりやすく動くメソッドを勉強しましょう。

animateメソッド

その名の通り、指定した要素をアニメーションのように動かしてくれるのが

animateメソッド

です。

自分が指定した「サイズ」や「位置」に、

「指定した速さ」で動いてくれます。

書き方としてはこんな感じ↓

$(‘動かしたい要素名’).animate({‘font-size’:’30px’},300);

({フォントサイズを30pxにする},300ミリ秒かけて )

font-sizeのところはアニメーション動作が入ります。

透明度を変えたい場合はopacity、

右へスライドさせたい場合はmarginLeftを使います。

hoverイベントと絡めた使い方

animateメソッドとhoverイベントを絡めて使うと、よくWebサイトでみかける

「マウスカーソルを乗せたときに動くアイコン」

をつくれます。

より目立たせることができますね👍

書き方はこんな感じです↓

$(‘要素’).hover(function(){

その要素にマウスが乗った時のanimate指定

},function(){

マウスが外れた時のanimate指定

});

animateメソッドをメソッドチェーンで書くと連続した動作も可能

1つ目の動作が終わった後に2つ目動きをさせたい

などという時は、animateメソッドを続けて書いてOKです。

「左にスライド→下にスライド」

という連続した動きが可能になります。

タイトルとURLをコピーしました