シュテル(@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です。
「左にスライド→下にスライド」
という連続した動きが可能になります。