jQuery.fx.interval 屬性使用詳解

jQuery.fx.interval屬性用於設定或傳回動畫的幀速(毫秒值)。

jQuery.fx.interval屬性用於設定jQuery動畫每隔多少毫秒繪製一幀圖像(觸發一次樣式更改，瀏覽器可能會重新繪製目前頁面)。

該值越小，則動畫的觸發次數越多，動畫效果也更明顯、更平滑，當然也就越耗費效能。

更改該屬性值時，正在執行的動畫佇列將不受影響。尚未執行的任何動畫隊列都將按照更改後的幀速來繪製動畫效果。

該屬性屬於全域的jQuery物件(也可理解為靜態屬性)。

語法

jQuery 1.4.3 新增該 靜態屬性。

jQuery.fx.interval

傳回值

jQuery.fx.interval屬性的回傳值是Number類型，傳回動畫的幀速(毫秒值)。

該屬性的預設值為 13。

範例&說明

請參考下面這段HTML範例程式碼：

    幀速(每隔多少毫秒繪製一幀)：

<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>

與jQuery.fx.interval屬性相關的jQuery範例程式碼如下：

// 更改帧速
$("#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 );        
} );

以上是jQuery.fx.interval 屬性使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！