jQuery.fx.off

jQuery

previous page next page

jQuery.fx.off

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

jQuery.fx.off Returns: Boolean

Description: Globally disable all animations.

  • version added: 1.3jQuery.fx.off

When this property is set to true, all animation methods will immediately set elements to their final state when called, rather than displaying an effect. This may be desirable for a couple reasons:

  • jQuery is being used on a low-resource device.
  • Users are encountering accessibility problems with the animations (see the article Turn Off Animation for more information).

Animations can be turned back on by setting the property to false.

Example:

Toggle animation on and off

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

                                    

                                      
                                        <!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"/> <button>Toggle fx</button></p>
                                    

                                  

                                  

                                    

                                      
                                        <div>
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      var toggleFx = function() {
                                    

                                  

                                  

                                    

                                        $.fx.off = !$.fx.off;
                                    

                                  

                                  

                                    

                                      };
                                    

                                  

                                  

                                    

                                      toggleFx();
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      $("button").click(toggleFx)
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                        </script>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page