以前ここでも「CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード／マウスオーバー／クリックアクション】」と題して、
CSSアニメーションの実行パターンをいくつか紹介しましたが、
アニメーションの実行制御をCSS側でなくjQueryで操作させる方法が
簡単でいろいろとこの先使えそうだったので紹介してみます。
jQueryでCSSアニメーションを実行させる方法
構成としてはCSS側でアニメーション設定をしておいて
jQuery側でコンテンツ要素に対してclassを付けたり外したりさせることで
その要素に対してアニメーション制御をする形になります。
例えばHTMLには
以下のようなidを付けたdivを用意して、
◆HTML <div id="action"></div>
CSS側では
以下のようにアニメーションをセットします。
◆CSS
#action{
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color:#fff;
border:#000 3px solid;
position: absolute;
-webkit-transition-property:left,width,height,background-color;
-webkit-transition-duration:1s,1s,1s,1s;
-webkit-transition-timing-function:linear,linear,linear,linear;
-moz-transition-property:left,width,height,background-color;
-moz-transition-duration:1s,1s,1s,1s;
-moz-transition-timing-function:linear,linear,linear,linear;
-o-transition-property:left,width,height,background-color;
-o-transition-duration:1s,1s,1s,1s;
-o-transition-timing-function:linear,linear,linear,linear;
transition-property:left,width,height,background-color;
transition-duration:1s,1s,1s,1s;
transition-timing-function:linear,linear,linear,linear;
}
#action.motion{
left: 400px;
width: 100px;
height: 100px;
background-color:#555;
}
クラス「.motion」に設定してある値がアニメーション実行後の動作になり、
このクラスをjQueryにて要素をクリックするごとに付けたり外したりすることで
アニメーションの実行制御をします。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
$('#action').click(function(){
$(this).toggleClass('motion');
});
});
</script>
そしてこれらを実行させると以下のような感じに。
※画面上の□をクリックしてください。
「jQueryでCSSアニメーションを実行させる方法」サンプルを別枠で表示
四角をクリックするごとに
「left」「width」「height」「background-color」の値を
CSSアニメーション変化させています。
サンプルではjQueryでのクリック動作でアニメーション制御していますが
マウスオーバーなどの別のアクションでも実行させることも可能です。
CSSよりもjQueryの方が様々なイベント処理が行えるので
jQueryでの制御によってCSSアニメーションをあれこれ操作するのも使いやすいかと思います。
jQueryでCSSアニメーションを実行させる際に是非。。。