Detailed explanation of jQuery.fx.interval property usage

jQuery.fx.interval property is used to set or return the frame rate (millisecond value) of animation.

The jQuery.fx.interval property is used to set how many milliseconds every jQuery animation draws a frame of image (triggering a style change, the browser may redraw the current page).

The smaller the value, the more times the animation is triggered, the animation effect is more obvious and smoother, and of course, the more performance is consumed.

When changing the value of this property, the animation queue being executed will not be affected. Any animation queues that have not yet been executed will be animated at the changed frame rate.

This property belongs to the global jQuery object (can also be understood as a static property).

Syntax

jQuery 1.4.3 NewThe static attribute.

jQuery.fx.interval

Return value

The return value of the jQuery.fx.interval property is Number type, returning the frame rate of the animation (millisecond value).

The default value of this attribute is 13.

Example & Description

Please refer to the following HTML sample code:

Frame rate (how many milliseconds a frame is drawn every ):

<select id="frameRate">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="13" selected="selected">默认(13)</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="300">300</option>
        <option value="1000">1000</option>
    </select>
    <input id="exec" type="button" value="执行动画" />
</p>
<div id="myDiv" style="width:300px; height: 100px; background-color: #ccc;" >CodePlayer</div>

The jQuery sample code related to the jQuery.fx.interval property is as follows:

// 更改帧速
$("#frameRate").change( function(){
    $.fx.interval = this.value; // 设置帧速
} );
// 执行动画
$("#exec").click( function(){
    var $myDiv = $("#myDiv");
    // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
    $myDiv.animate( { height: "+=300px" }, 2000 ); 
    $myDiv.animate( { width: "50%" }, 1000 );       
    $myDiv.animate( { width: "200px", height: "100px" }, 1000 );        
} );

The above is the detailed content of Detailed explanation of jQuery.fx.interval property usage. For more information, please follow other related articles on the PHP Chinese website!