jQuery 「エフェクト」アニメーション効果の無効化
jQueryでは、アニメーション効果のオン・オフをグローバルなプロパティ「jQuery.fx.off」の値だけで制御できます。jQuery.fx.offにtrueを設定すると、その時点からすべてのアニメーション効果が一切効かなくなります。逆に、falseを設定すればいつでもアニメーション効果を復活させられます。また、「jQuery.fx.off」の「jQuery」の部分は「$」の文字に置き換えが可能です。
書式
jQuery.fx.off=true
$.fx.off=falseサンプル
アニメーション効果の有効化・無効化。サンプルでは「click」ボタンをクリックすると左の青い四角の図形が徐々に薄くなり消えていく動きが見られます。この動作はセレクタにdivを指定し、.toggle()メソッドで「slow（遅く）」と要素に付与する動きの速さを指定しているためです。ここで記述している「jQuery.fx.off」の設定をfalseからtrueに変更するとアニメーション効果が無効となるため、divに付与した動作がなくなり、青い四角図形は「click」ボタンをクリックした瞬間非表示になります。
<html>
<head>
<meta charset="UTF-8">
<title>テストページ</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
div{
width: 50px;
height: 30px;
margin: 5px;
float: left;
background: blue;
}
</style>
</head>
<body>
<form>
<input type="button" value="click">
<div></div>
</form>
<script>
$(document).ready(function(){
jQuery.fx.off=false;
$("input").on('click' ,function(){
$('div').toggle("slow");
})
});
</script>
</body>
</html>
