<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
/*
プレースホルダー( この中の絶対座標で表示する )
*/
#holder {
position: relative;
width: 300px;
height: 200px;
}
/*
1) Chrome バージョン 25.0.1364.152 m 現在、-webkit- が必要
( safari も同様 )
2) その他は、@keyframes で動作
*/
@-webkit-keyframes doing-rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes doing-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/*
カスタム要素で実装
*/
doing {
position: absolute; /* 目的の性格上、親要素は position:relative */
display: block; /* 必須 : Opera の都合で最初から設定しておく必要があります */
visibility: hidden; /* 目的の性格滋養、初期は非表示 */
border-radius: 50%; /* 元の形状を丸くする為 */
font-size: 18px; /* 位置指定を em でしているので、ここを変更すると半径変更 */
width: 5px; /* サイズ変更 */
height: 5px;
/* em を使うと、font-size にサイズを連動させる事ができる */
/* width: .25em; height: .25em; */
/* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
box-shadow:
0 -.4em 0 0 rgba(50,0,0,1),
-.28em -.28em 0 0 rgba(50,0,0,.75),
-.4em 0 0 0 rgba(50,0,0,.50),
-.28em .28em 0 0 rgba(50,0,0,.25)
;
}
</style>
<div id="holder">
<!-- カスタムでは終了タグが必要です -->
<doing></doing>
<input type="button" id="start" value="start" />
<input type="button" id="stop" value="stop" />
<input type="button" id="move" value="移動" />
<input type="button" id="startie9" value="start2" />
<input type="button" id="stopie9" value="stop2" />
</div>
<script type="text/javascript">
// 処理の性格上、同時に一つしか使わない事を前提に jQuery の名前空間に
// 単独で追加登録しています
//
// 複数のアニメーションを作成する場合は、$.fn.extend で、
// jQuery オブジェクトに対する実装に変更します
$.extend({
// 表示開始
ani_start: function(name) {
if ($.ani_value.userAgent.indexOf("msie") > -1) {
if ($.ani_value.appVersion.indexOf("msie 10.0") > -1) {
$(name).css("visibility", "visible")
.css("animation", ".85s doing-rotate steps(8) infinite");
}
// IE は、10 以外は動作しないので、手動でアニメーションする
else {
$.ani_start2(name);
}
}
else {
$(name).css("visibility", "visible")
// アニメーションを開始する css を設定する
.css("animation", ".85s doing-rotate steps(8) infinite");
}
return $(name);
},
// 表示停止
ani_stop: function(name) {
if ($.ani_value.userAgent.indexOf("msie") > -1) {
if ($.ani_value.appVersion.indexOf("msie 10.0") > -1) {
$(name).css("visibility", "hidden")
.css("animation-name", "none");
}
// IE は、10 以外は動作しないので、手動でアニメーションを止める
else {
$.ani_stop2(name);
}
}
else {
$(name).css("visibility", "hidden")
// アニメーションを停止する css を設定する
.css("animation-name", "none");
}
return $(name);
},
// 表示位置変更
ani_move: function(name,x,y) {
$(name).css("left", x+"px")
.css("top", y+"px");
return $(name);
},
// 手動アニメーション
ani_start2: function(name) {
// ループ用のプライベート関数
function loop() {
$.ani_value.timerid = window.setTimeout(loop,120);
$.ani_value.loopdeg += 45;
$(name).css("transform", "rotate("+$.ani_value.loopdeg+"deg)");
}
// 再入を防ぐ
if ( $.ani_value.timerid == null ) {
$(name).css("visibility", "visible");
loop();
}
return $(name);
},
// 手動アニメーションの停止
ani_stop2: function(name) {
$(name).css("visibility", "hidden");
// 動いている時だけ止める
if ( $.ani_value.timerid != null ) {
clearTimeout($.ani_value.timerid);
$.ani_value.timerid = null;
}
return $(name);
},
// 利用する変数
ani_value: {
loopdeg: 0,
timerid: null,
userAgent: window.navigator.userAgent.toLowerCase(),
appVersion: window.navigator.appVersion.toLowerCase()
}
});
// 初期位置
$.ani_move( "doing", 100, 60 );
var move_x = 100;
// ボタンの処理を登録
$("#start").click( function(){ $.ani_start("doing"); } );
$("#stop").click( function(){ $.ani_stop("doing"); } );
$("#move").click( function(){ $.ani_move( "doing", ( move_x < 180 ) ? move_x+=40 : move_x=100, 60 ); } );
$("#startie9").click( function(){ $.ani_start2("doing"); } );
$("#stopie9").click( function(){ $.ani_stop2("doing"); } );
</script>