JQuery jQuery.fx.interval用法及代碼示例

jQuery中的jQuery.fx.interval屬性用於修改動畫每秒運行的幀數，並以毫秒為單位更改動畫的觸發速率。默認值為13ms。

用法:

jQuery.fx.interval = milliseconds;

參數：此方法接受強製的單個參數毫秒。用於指定動畫觸發速率(以毫秒為單位)。默認值為13毫秒。

示例1:本示例使用jQuery.fx.interval屬性更改動畫的觸發率。

<!DOCTYPE html> 
<html> 
  
<head>  
    <title> 
        jQuery jQuery.fx.interval Property 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <style> 
        .box { 
            background:green; 
            height:100px; 
            width:100px; 
            margin:50px; 
        } 
    </style> 
</head>  
  
<body> 
    <center> 
        <h1 style = "color:green;" >   
            GeeksForGeeks 
        </h1>   
          
        <h2> jQuery.fx.interval property</h2> 
          
        <button id="toggle"> 
            Toggle div 
        </button> 
          
        <button id="interval"> 
            Run animation with less frames 
        </button> 
       
        <div class="box"></div> 
          
        <!-- Script to illustrate jQuery.fx.interval 
            property -->
        <script> 
            $(document).ready(function(){ 
                $("#toggle").on("click", function() { 
                    $("div").toggle(5000); 
                }); 
                  
                $("#interval").on("click", function() { 
                    jQuery.fx.interval = 500; 
                }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>

輸出

示例2:本示例使用jQuery.fx.interval屬性更改動畫的觸發率。

<!DOCTYPE html> 
<html> 
  
<head>  
    <title> 
        jQuery jQuery.fx.interval Property 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <style> 
        .box { 
            background:green; 
            height:100px; 
            width:100px; 
            margin:50px; 
        } 
    </style> 
</head>  
  
<body> 
    <center> 
        <h1 style = "color:green;" >   
            GeeksForGeeks 
        </h1>   
          
        <h2> jQuery.fx.interval property</h2> 
          
        <button id="toggle"> 
            Toggle div 
        </button> 
          
        <button id="interval"> 
            Run animation with less frames 
        </button> 
       
        <div class="box"></div> 
          
        <!-- Script to illustrate jQuery.fx.interval 
            property -->
        <script> 
            $(document).ready(function(){ 
                $("#toggle").on("click", function() { 
                    $("div").toggle(500); 
                }); 
                  
                $("#interval").on("click", function() { 
                    jQuery.fx.interval = 5000; 
                }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自SHUBHAMSINGH10大神的英文原創作品 jQuery | jQuery.fx.interval Property with example。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。