以前ここでも「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アニメーションを実行させる際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでCSSアニメーションを実行させる方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR