jQuery jQuery.fx.interval 属性

  • 定义和用法

    jQuery.fx.interval 属性用于改变以毫秒计的动画运行速率。
    默认值是 13 毫秒。该属性常用于修改动画运行的每秒帧数。降低这个值能够使动画在更快的浏览器中运行得更流畅,但这么做会影响性能 和 CPU。
    注意:由于 jQuery 使用一个全局的间隔时间,为了使该属性生效,动画应该不在运行或者首先停止所有动画。
    注意:该属性在支持 requestAnimationFrame 属性的浏览器中无效,比如 Google Chrome 11。
  • 语法

    jQuery.fx.interval = milliseconds;
  • 参数

    参数 必需的 描述
    milliseconds 规定以毫秒计的动画运行速率。默认是 13 毫秒。
  • 实例

    下例演示了以较少的帧数来运行 <div> 元素的动画:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
    //此版本是百度cdn 1.11.1,当然你可以使用更高的版本,从2.0版本以上的是不支持ie6-8的
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
       $(document).ready(function(){
          $("#toggle").on("click",function(){
             $("div").toggle(5000);
          });
          $("#interval").on("click",function(){
             jQuery.fx.interval = 500;
          });
       });
    </script>
    </head>
    <body>
       <p>“div切换”按钮被按下时,我们在隐藏和显示div之间切换(默认是13毫秒)。每次“减少运行动画帧”按钮被按下,我们添加500毫秒的属性,这将导致以更少的帧运行动画(根据不同的浏览器,这可能导致动画运行流畅度低于期望)。</p>
       <p><b>注意:</b> 由于jQuery使用一个全局间隔,任何更改此属性生效,没有动画运行或者说动画都应该先停止运行(按“切换div”,然后当" div "完成动画时按“运行动画帧更少”。当动画已经停止,再次按“切换div”注意效果)。</p>
       <button id="toggle">div切换</button>
       <button id="interval">减少运行动画帧</button>
       <div style="background:#98bf21;height:100px;width:100px;margin:50px;">
       </div>
    </body>
    </html>                    
    
    尝试一下