jQuery の animate メソッドに渡せるのは、数値表現のプロパティのみなので、既存の要素では使えるものはほとんどありません。例えば、回転処理なんかもそのうちの一つですが、この方法を使えばどんなものでもアニメーション化できます。 この方法を解説していたのは、stackoverflow( CSS rotation cross browser with jquery.animate() ) でした このソースでちょっと解りにくいのが、$({kakudo: 0}) の部分ですが、なんの事は無く {kakudo: 0} という超シンプルなオブジェクトに対してアニメーション処理をしようというわけで、このオブジェクトは当然 kakudo プロパティ を持っているので、step イベントが 0 度から 指定角度までの間呼ばれ続けるわけです。 それを利用した単純な繰り返し処理です。 その結果、いとも簡単にページ全体の回転処理を作成する事ができました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$.fn.extend({
rotateAction: function(deg, duration, easing){
var target = this;
// ページ全体の回転の中心を作成する処理。(画像の場合は必要ありません)
$(document.body).css({'transform-origin':'center '+($('html').scrollTop()+300) + 'px'});
$({kakudo: 0}).animate(
{kakudo: deg},
{
duration: duration,
easing: easing,
step: function(now) {
target.css({
transform: 'rotate(' + now + 'deg)'
});
}
}
);
}
});
</script>
<input type="button" value="画像回転" onclick='$("#target").rotateAction(360,1000,"swing");'>
<br>
<input type="button" value="全て回転" onclick='$(document.body).rotateAction(360,2000,"swing");'>
<br><br><br>
<img id="target" src="https://lh5.googleusercontent.com/-kCYTSmTrJXs/URvMQy9ClqI/AAAAAAAARuw/5BTKTk2c_sw/s128/_img.png" style="border: solid 0px #000000" />
関連する記事
|
|
【プラグイン作成(jQuery)の最新記事】
- HTML 上のデータをローカルに保存する jQuery プラグイン
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery のプラグインとしてストリートビューを利用する
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )
