WEBデザイナーズNEXT

Webデザイナー

animate(jQuery)の使い方まとめ

カテゴリー:jQuery
Pocket

animate(jQuery)を使ってみた
jQueryが出てからというもの、Webデザイナーにとってjsがすごく使いやすくなったのではないでしょうか?
私は昔からjsをちょこちょこいじっていたのですが、jQueryが使えるようになってからはとっても楽ちんで助かっています。
今回はアニメーションで有名なanimateの使い方をまとめてみました。

スポンサードリンク

まずはjQueryを使う準備をする

jQueryを使う準備をします・・・と思いましたが、今回はちょっとすっ飛ばしちゃいます。別の機会にjQueryを使う方法をまとめようと思います。

追記:jqueryとは?をまとめてみました。
【はじめてのjQuery】 jQueryとは?

animateで必要な項目

ヘッダー内にjQueryのjsを設定します。


※私はローカルにjsファイルを置いて使っています。バージョンはいくつからかわかりませんが、最新のものでも動くと思います。

スクリプトコピペ用


この書き方は.boxというクラスが上に100px移動するという書き方です。
CSSで初期値にopacity:0;を振っていて、上に100px移動する間に透明なboxが見えてくる感じですかね。

animate(jQuery)の使い方まとめ

animateの使い方
とりあえずanimateでよく使用するオプションをまとめました。全て実験済みのものになります。

スピードに変化をつける…easing

某元野球監督風に言うなら、グワーって動いたりぐいーんと動いたり、シュパンって動いたり…ってのを変化させるものです。

書き方例:


easingは色々な書き方があるので、こちらのサイトを参考にしてみてください。
https://semooh.jp/jquery/cont/doc/easing/

時間差でスタートさせる

書き方例:


1秒後にスタートさせています。

連続動作をさせる

ここからこうやってこう動かしたい…って時に使います。説明が下手ですいません。

書き方例:


この書き方では、上に100px移動させてから右に300px移動させます。

ボタンを押した時にjQueryを動かす

ボタンを押してからアニメーションをスタートさせたい時はこんな感じで書きます。

書き方例:


.btnというクラスをクリックするとアニメーションがスタートします。

終わった時にアクションを起こす

アニメーションが終わった時にアクションを起こします。

書き方例:


ボタンを押したら上に100px移動し、その後右に300px移動する。それが終わったら「OK」という完了アラートが出るといった感じです。

拡大・縮小する


ボタンを押したらボックスのサイズを変更するというものです。この場合は左下を起点として拡大しています。
中心を起点をして拡大したい場合は、以下のように移動させればOKかなと。

書き方例:

animate(jQuery)まとめ

必要なのはこんな感じでしょうかね。animateは他にも色々オプションがあったりするので、また使用する時に更新しようと思います。

こんな記事もどうですか?
スマホで使用頻度の高いアコーディオン(jQuery)をまとめてみた

スポンサードリンク

Pocket

カテゴリー:jQuery
WEBデザイナーズNEXT TOP