jQuery API の jQuery . fx . interval は、アニメーションを実行する1秒あたりのフレーム数を調整するプロパティ。
デフォルトは13ミリ秒。
小さい数値は、アニメーションを、よりスムーズに動作させることができる。
戻り値
- Number
数値。
記述方法
jQuery . fx . interval = 数字;
アニメーションの1秒あたりのフレーム数を、「数字」に指定した数値に設定。
記述方法
jQuery . fx . interval = 100;
アニメーションの1秒あたりのフレーム数を、「100」に設定。
実装例（サンプル）
jQuery . fx . interval ：
実装例（サンプル）の動作について
「1」のradioボタンを選択し、「toggle」ボタンをクリックした時のアニメーションと、「100」のradioボタンを選択し、「toggle」ボタンをクリックした時のアニメーションを比較してみて。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-smaple-form input[name=jquery-smaple-radio]' ) . change(
function () {
jQuery( '#jquery-smaple-form input' ) . closest( 'label' ) . css( {
backgroundColor: 'yellow',
borderColor: 'gray',
} );
jQuery( '#jquery-smaple-form :checked' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
borderColor: 'red',
} );
jQuery . fx . interval = jQuery( '#jquery-smaple-form :checked' ) . val();
jQuery( '#jquery-api-message' ) . text(jQuery . fx . interval);
}
) . change();
jQuery( '#jquery-api-animate-toggle' ) . toggle(
function() {
jQuery( '#jquery-api-animate' )
. animate(
{
width: 200,
height: 200,
},
{
duration: 'slow',
}
);
},
function() {
jQuery( '#jquery-api-animate' )
. animate(
{
height: 50,
width: 50,
},
{
duration: 'slow',
}
);
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-smaple-form input[name=jquery-smaple-radio]' ) . change(
function () {
jQuery( '#jquery-smaple-form input' ) . closest( 'label' ) . css( {
backgroundColor: 'yellow',
borderColor: 'gray',
} );
jQuery( '#jquery-smaple-form :checked' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
borderColor: 'red',
} );
jQuery . fx . interval = jQuery( '#jquery-smaple-form :checked' ) . val();
jQuery( '#jquery-api-message' ) . text(jQuery . fx . interval);
}
) . change();
jQuery( '#jquery-api-animate-toggle' ) . toggle(
function() {
jQuery( '#jquery-api-animate' )
. animate(
{
width: 200,
height: 200,
},
{
duration: 'slow',
}
);
},
function() {
jQuery( '#jquery-api-animate' )
. animate(
{
height: 50,
width: 50,
},
{
duration: 'slow',
}
);
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-smaple-form {
padding: 10px 5px;
}
#jquery-smaple-form input {
margin: 5px 5px 15px 5px;
cursor: pointer;
}
#jquery-smaple-form label {
margin: 5px;
padding: 5px 10px;
border: 1px solid gray;
border-radius: 10px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
}
#jquery-api-message {
color: red;
}
#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-smaple-form {
padding: 10px 5px;
}
#jquery-smaple-form input {
margin: 5px 5px 15px 5px;
cursor: pointer;
}
#jquery-smaple-form label {
margin: 5px;
padding: 5px 10px;
border: 1px solid gray;
border-radius: 10px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
}
#jquery-api-message {
color: red;
}
#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
<form id="jquery-smaple-form">
<p>
<label>
<input type="radio" name="jquery-smaple-radio" value="1" />
1
</label>
<label>
<input type="radio" name="jquery-smaple-radio" value="13" checked="checked" />
13
</label>
<label>
<input type="radio" name="jquery-smaple-radio" value="100" />
100
</label>
</p>
</form>
<p>
<button id="jquery-api-animate-toggle">toggle</button> jQuery . fx . interval ： <span id="jquery-api-message"></span>
</p>
<div id="jquery-api-animate"></div>
<p>
<label>
<input type="radio" name="jquery-smaple-radio" value="1" />
1
</label>
<label>
<input type="radio" name="jquery-smaple-radio" value="13" checked="checked" />
13
</label>
<label>
<input type="radio" name="jquery-smaple-radio" value="100" />
100
</label>
</p>
</form>
<p>
<button id="jquery-api-animate-toggle">toggle</button> jQuery . fx . interval ： <span id="jquery-api-message"></span>
</p>
<div id="jquery-api-animate"></div>