jQuery.fx.interval

jQuery

previous page next page

jQuery.fx.interval

Categories: Effects > Custom | Properties > Properties of the Global jQuery Object

jQuery.fx.interval Returns: Number

Description: The rate (in milliseconds) at which animations fire.

  • version added: 1.4.3jQuery.fx.interval

This property can be manipulated to adjust the number of frames per second at which animations will run. The default is 13 milliseconds. Making this a lower number could make the animations run smoother in faster browsers (such as Chrome) but there may be performance and CPU implications of doing so.

Since jQuery uses one global interval, no animation should be running or all animations should stop for the change of this property to take effect.

Note:jQuery.fx.interval currently has no effect in browsers that support the requestAnimationFrame property, such as Google Chrome 11. This behavior is subject to change in a future release.

Example:

Cause all animations to run with less frames.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      div { width:50px; height:30px; margin:5px; float:left;
                                    

                                  

                                  

                                    

                                            background:green; }
                                    

                                  

                                  

                                    

                                      
                                        </style>
                                      
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p><input type="button" value="Run"/></p>
                                    

                                  

                                  

                                    

                                      
                                        <div>
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      jQuery.fx.interval = 100;
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      $("input").click(function(){
                                    

                                  

                                  

                                    

                                        $("div").toggle( 3000 );
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                        </script>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page