jQuery API の jQuery . fx . off は、jQuery による全てのアニメーションを無効にするプロパティ。
実装例（サンプル）
実装例（サンプル）の動作について
- 「toggle」ボタンをクリックすると、オレンジ色のブロックの幅が50pxから200pxへアニメーション変化し、次に、ブロックの背景色がピンク色になり、最後に、高さが50pxから200pxへアニメーション変化する。
- 「toggle」ボタンを再度クリックすると、ピンク色のブロックの高さが200pxから50pxへアニメーション変化し、次に、ブロックの背景色がオレンジ色になり、最後に、幅が200pxから50pxへアニメーション変化する。
- 「アニメーション」チェックボックスをクリックし、チェックを解除し、「toggle」ボタンをクリックすると、幅も高さも、瞬時に 200px になる。「toggle」ボタンを再度クリックすると、幅も高さも、瞬時に 50px になる。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-animate-checkbox input' ) . click( function() {
jQuery . fx . off = ! jQuery( this ) . attr( 'checked' );
} );
jQuery( '#jquery-api-animate-toggle' ) . toggle(
function() {
jQuery( '#jquery-api-animate' )
. animate(
{
width: 200,
},
{
duration: 2000,
}
)
. queue( function() {
jQuery( this ) . css( { backgroundColor: 'pink' } ) . dequeue();
} )
. animate(
{
height: 200,
},
{
duration: 2000,
}
);
},
function() {
jQuery( '#jquery-api-animate' )
. animate(
{
height: 50,
},
{
duration: 2000,
}
)
. queue( function() {
jQuery( this ) . css( { backgroundColor: 'orange' } ) . dequeue();
} )
. animate(
{
width: 50,
},
{
duration: 2000,
}
);
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-animate-checkbox input' ) . click( function() {
jQuery . fx . off = ! jQuery( this ) . attr( 'checked' );
} );
jQuery( '#jquery-api-animate-toggle' ) . toggle(
function() {
jQuery( '#jquery-api-animate' )
. animate(
{
width: 200,
},
{
duration: 2000,
}
)
. queue( function() {
jQuery( this ) . css( { backgroundColor: 'pink' } ) . dequeue();
} )
. animate(
{
height: 200,
},
{
duration: 2000,
}
);
},
function() {
jQuery( '#jquery-api-animate' )
. animate(
{
height: 50,
},
{
duration: 2000,
}
)
. queue( function() {
jQuery( this ) . css( { backgroundColor: 'orange' } ) . dequeue();
} )
. animate(
{
width: 50,
},
{
duration: 2000,
}
);
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-api-animate {
background-color: orange;
height: 50px;
width: 50px;
}
#jquery-api-animate-checkbox {
color: black;
}
#jquery-api-animate-checkbox input {
margin: 0;
}
-->
</style>
<!--
#jquery-api-animate {
background-color: orange;
height: 50px;
width: 50px;
}
#jquery-api-animate-checkbox {
color: black;
}
#jquery-api-animate-checkbox input {
margin: 0;
}
-->
</style>
HTML
<p>
<label id="jquery-api-animate-checkbox"> <input type="checkbox" checked> アニメーション</label>
</p>
<p>
<button id="jquery-api-animate-toggle">toggle</button>
</p>
<div id="jquery-api-animate"></div>
<label id="jquery-api-animate-checkbox"> <input type="checkbox" checked> アニメーション</label>
</p>
<p>
<button id="jquery-api-animate-toggle">toggle</button>
</p>
<div id="jquery-api-animate"></div>