jQueryが出てからというもの、Webデザイナーにとってjsがすごく使いやすくなったのではないでしょうか？
私は昔からjsをちょこちょこいじっていたのですが、jQueryが使えるようになってからはとっても楽ちんで助かっています。
今回はアニメーションで有名なanimateの使い方をまとめてみました。
スポンサードリンク
まずはjQueryを使う準備をする
jQueryを使う準備をします・・・と思いましたが、今回はちょっとすっ飛ばしちゃいます。別の機会にjQueryを使う方法をまとめようと思います。
追記：jqueryとは？をまとめてみました。
【はじめてのjQuery】 jQueryとは？
animateで必要な項目
ヘッダー内にjQueryのjsを設定します。
|
1 |
<script type="text/javascript" src="common/js/jquery-1.8.2.js"></script> |
※私はローカルにjsファイルを置いて使っています。バージョンはいくつからかわかりませんが、最新のものでも動くと思います。
スクリプトコピペ用
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(function() { $('.box').animate({ 'top': '100px', 'opacity': '1' },3000); }); </script> |
この書き方は.boxというクラスが上に100px移動するという書き方です。
CSSで初期値にopacity:0;を振っていて、上に100px移動する間に透明なboxが見えてくる感じですかね。
animate(jQuery)の使い方まとめ
とりあえずanimateでよく使用するオプションをまとめました。全て実験済みのものになります。
スピードに変化をつける…easing
某元野球監督風に言うなら、グワーって動いたりぐいーんと動いたり、シュパンって動いたり…ってのを変化させるものです。
書き方例：
|
1 2 3 4 5 6 7 |
$('.box1').animate({ 'top': '100px', 'opacity': '1' },{ 'duration': 4000, 'easing': 'swing' }); |
easingは色々な書き方があるので、こちらのサイトを参考にしてみてください。
https://semooh.jp/jquery/cont/doc/easing/
時間差でスタートさせる
書き方例：
|
1 2 3 4 5 6 7 8 9 |
setTimeout(function(){ $('.box2').animate({ 'top': '150px', 'opacity': '1' },{ 'duration': 4000, 'easing': 'swing' }); },1000); |
1秒後にスタートさせています。
連続動作をさせる
ここからこうやってこう動かしたい…って時に使います。説明が下手ですいません。
書き方例：
|
1 2 3 4 5 |
$(function() { $('.box1') .animate({'top': '100px'}) .animate({'left': '300px'}); }); |
この書き方では、上に100px移動させてから右に300px移動させます。
ボタンを押した時にjQueryを動かす
ボタンを押してからアニメーションをスタートさせたい時はこんな感じで書きます。
書き方例：
|
1 2 3 4 5 6 7 8 |
$(function(){ $(".btn").click(function(){ $('.box1') .animate({'top': '100px'}) .animate({'left': '300px'}); }) }); |
.btnというクラスをクリックするとアニメーションがスタートします。
終わった時にアクションを起こす
アニメーションが終わった時にアクションを起こします。
書き方例：
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ $(".btn").click(function(){ $('.box1') .animate({'top': '100px'}) .animate({'left': '300px' },{ 'complete': function(){ alert('OK'); } }); }); }); |
ボタンを押したら上に100px移動し、その後右に300px移動する。それが終わったら「OK」という完了アラートが出るといった感じです。
拡大・縮小する
|
1 2 3 4 5 6 7 8 9 |
$(function(){ $(".btn").click(function(){ $('.box1') .animate({ width: '200px', height: '200px' }) }) }); |
ボタンを押したらボックスのサイズを変更するというものです。この場合は左下を起点として拡大しています。
中心を起点をして拡大したい場合は、以下のように移動させればOKかなと。
書き方例：
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ $(".btn").click(function(){ $('.box1') .animate({ left: '50px', bottom: '50px', width: '200px', height: '200px' }) }) }); |
animate(jQuery)まとめ
必要なのはこんな感じでしょうかね。animateは他にも色々オプションがあったりするので、また使用する時に更新しようと思います。
スマホで使用頻度の高いアコーディオン(jQuery)をまとめてみた
スポンサードリンク
