$.fx.off=trueではdelay()を使用している場合にアニメーションの完全な無効化ができない件を解決する

jQueryによるアニメーションを無効にしたい場合、

という記述を先頭に加えればアニメーションを無効にすることができます。

jQuery.fx.off
jQuery.fx.offは、jQueryで実行する全てのアニメに関わる「プロパティ」で、trueを設定することでアニメでの演出を行わないようにします。アニメを実行するように戻したい時はfalseを設定します。

アニメーションをふんだんに使ってグリングリン動くWebアプリケーションやWebサイトを作ったけど、リリース間際になって「動くのがウザいからアニメーションのオンとオフを切り替えられるようにして^^」みたいなうっとおしいことを言われた場合でも、ボタンか何かで「$.fx.off」の値を定義するようにすれば簡単に解決できそうに思えます。

しかし「$.fx.off」は「アニメーションを無効にする」というよりも、「アニメーションの速度を0にする」という処理のため、$.fx.offがtrueであってもアニメーション処理ではないdelay()が生き続けます。

これではこちらが叶えたい「アニメーションを無効にする」という処理にはなりませんので、delay()を殺す方法を考えてみました。

DEMO

AD

ベースのアニメーション

animate

たとえば、

1.右に300px動く
2.1秒静止
3.下に100px動く
4.1秒静止
5.左に300px動く

というアニメーションを設定したとします。

$.fx.off=trueのみを設定した場合

このアニメーションを無効にしたい場合、アニメーション開始前に「$.fx.off=true;」という記述を加えれば、一見するとうまくアニメーションが無効化されているように見えます。

animate2

が、見ての通りですが、delay(1000)がそのまま残ってしまうため、コマ送りアニメのようになってしまいました。

$.fx.off=trueと$.fn.delayを上書きした場合

そこで$.fx.off=trueを設定すると同時に、delay()を実現する関数である$.fn.delayを上書きして完全に無効化します。
ただしdelay()を後ほど使う可能性も高いので、アニメーション完了後は$.fn.delayの初期値を再度定義し直します。

animate3

まとめ

うっとおしく思われるようなアニメーションならはじめから付けなければいいと思う(;´∀`)

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。