jQuery . fx . interval

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>

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>

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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, エフェクト, カスタム, プロパティ タグ: パーマリンク