SQLの窓 イラストAC フリー素材

2014年08月03日

CSS transition : jQuery の addClass と removeClass で変化を付ければいい。いや、これが一番よさそうだ。

CSS transition : 1) 最初の状態、2) マウスカーソルが上に乗った時の状態、3) 変化の定義』では、スクリプトを使わずにマウスが画像の上に乗った時、と言うイベントを CSS で表現していましたが、要するに transition さえ設定されておれば、単純に前の状態から後の状態にアニメーションするというのが仕様なので。
以下のように、jQuery で、変化後の状態を定義したクラスを追加するのが最も直感的かつ解りやすいです。当然 remove しても状態は変化するので(元にもどる)、単純なアニメーションならば、CSS で設定するより、jQuery は明確に解りやすい気がします。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#action")
		.attr( { "type": "button" })
		.val( "アニメーション1" )
		.click(function(){
			$("#target").addClass("set_image2");
		});
	$("#action2")
		.attr( { "type": "button" })
		.val( "アニメーション2" )
		.click(function(){
			$("#target").removeClass("set_image2");
		});
});
</script>
<style type="text/css">
/**************************************/
/* 変化前の状態 */
/**************************************/
.set_image {
	width: 526px;
	height: 526px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
	background-color: #000000;
}
/**************************************/
/* 変化後の状態 */
/**************************************/
.set_image2    {  
	width: 300px;
	height: 300px;
	background-position: -90px 0px;
	background-color: #4DBDB5;
	transform: rotate(360deg);
}  
/**************************************/
/* 変化の定義 */
/**************************************/
.box_transition {
	transition: all 1.3s ease-out 0s;
}
</style>
<input id="action"><input id="action2">
<div id="target" class="box_transition set_image"></div>


【jQueryの最新記事】
posted by at 2014-08-03 01:21 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX