.fadeTo()

jQuery

previous page next page

.fadeTo()

Categories: Effects > Fading

.fadeTo( duration, opacity [, complete ] ) Returns: jQuery

Description: Adjust the opacity of the matched elements.

  • version added: 1.0.fadeTo( duration, opacity [, complete ] )

    • duration
      Type: String or Number
      A string or number determining how long the animation will run.
    • opacity
      Type: Number
      A number between 0 and 1 denoting the target opacity.
    • complete
      Type: Function()
      A function to call once the animation is complete.

  • version added: 1.4.3.fadeTo( duration, opacity [, easing ] [, complete ] )

    • duration
      Type: String or Number
      A string or number determining how long the animation will run.
    • opacity
      Type: Number
      A number between 0 and 1 denoting the target opacity.
    • easing
      Type: String
      A string indicating which easing function to use for the transition.
    • complete
      Type: Function()
      A function to call once the animation is complete.

The .fadeTo() method animates the opacity of the matched elements.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, the default duration of 400 milliseconds is used. Unlike the other effect methods, .fadeTo() requires that duration be explicitly specified.

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

We can animate any element, such as a simple image:

1
2
3
4
5
6
7
8
9
10
 
                                

                                  

                                    
                                      <div id="clickme">
                                    
                                  

                                

                                

                                  

                                        Click here
                                  

                                

                                

                                  

                                      </div>
                                  

                                

                                

                                  

                                      <img id="book" src="book.png" alt="" width="100" height="123" />
                                  

                                

                                

                                  

                                      With the element initially shown, we can dim it slowly:
                                  

                                

                                

                                  

                                      $('#clickme').click(function() {
                                  

                                

                                

                                  

                                        $('#book').fadeTo('slow', 0.5, function() {
                                  

                                

                                

                                  

                                          // Animation complete.
                                  

                                

                                

                                  

                                        });
                                  

                                

                                

                                  

                                      });

With duration set to 0, this method just changes the opacity CSS property, so .fadeTo(0, opacity) is the same as .css('opacity', opacity).

Additional Notes:

  • All jQuery effects, including .fadeTo(), can be turned off globally by setting jQuery.fx.off = true, which effectively sets the duration to 0. For more information, see jQuery.fx.off.

Examples:

Example: Animates first paragraph to fade to an opacity of 0.33 (33%, about one third visible), completing the animation within 600 milliseconds.

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

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>
                                    

                                  

                                  

                                    

                                      Click this paragraph to see it fade.
                                    

                                  

                                  

                                    

                                      
                                        </p>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <p>
                                      
                                    

                                  

                                  

                                    

                                      Compare to this one that won't fade.
                                    

                                  

                                  

                                    

                                      
                                        </p>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      $("p:first").click(function () {
                                    

                                  

                                  

                                    

                                      $(this).fadeTo("slow", 0.33);
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Fade div to a random opacity on each click, completing the animation within 200 milliseconds.

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
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      p { width:80px; margin:0; padding:5px; }
                                    

                                  

                                  

                                    

                                      div { width:40px; height:40px; position:absolute; }
                                    

                                  

                                  

                                    

                                      div#one { top:0; left:0; background:#f00; }
                                    

                                  

                                  

                                    

                                      div#two { top:20px; left:20px; background:#0f0; }
                                    

                                  

                                  

                                    

                                      div#three { top:40px; left:40px; background:#00f; }
                                    

                                  

                                  

                                    

                                      
                                        </style>
                                      
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>And this is the library that John built...</p>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <div id="one">
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <div id="two">
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <div id="three">
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      $(this).fadeTo("fast", Math.random());
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Find the right answer! The fade will take 250 milliseconds and change various styles when it completes.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      div, p { width:80px; height:40px; top:0; margin:0;
                                    

                                  

                                  

                                    

                                      position:absolute; padding-top:8px; }
                                    

                                  

                                  

                                    

                                      p { background:#fcc; text-align:center; }
                                    

                                  

                                  

                                    

                                      div { background:blue; }
                                    

                                  

                                  

                                    

                                      
                                        </style>
                                      
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>Wrong</p>
                                    

                                  

                                  

                                    

                                      
                                        <div>
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      <p>Wrong</p>
                                    

                                  

                                  

                                    

                                      
                                        <div>
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      <p>Right!</p>
                                    

                                  

                                  

                                    

                                      
                                        <div>
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      var getPos = function (n) {
                                    

                                  

                                  

                                    

                                        return (Math.floor(n) * 90) + "px";
                                    

                                  

                                  

                                    

                                      };
                                    

                                  

                                  

                                    

                                      $("p").each(function (n) {
                                    

                                  

                                  

                                    

                                        var r = Math.floor(Math.random() * 3);
                                    

                                  

                                  

                                    

                                        var tmp = $(this).text();
                                    

                                  

                                  

                                    

                                        $(this).text($("p:eq(" + r + ")").text());
                                    

                                  

                                  

                                    

                                        $("p:eq(" + r + ")").text(tmp);
                                    

                                  

                                  

                                    

                                        $(this).css("left", getPos(n));
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      $("div").each(function (n) {
                                    

                                  

                                  

                                    

                                        $(this).css("left", getPos(n));
                                    

                                  

                                  

                                    

                                      })
                                    

                                  

                                  

                                    

                                      .css("cursor", "pointer")
                                    

                                  

                                  

                                    

                                      .click(function () {
                                    

                                  

                                  

                                    

                                          $(this).fadeTo(250, 0.25, function () {
                                    

                                  

                                  

                                    

                                            $(this).css("cursor", "")
                                    

                                  

                                  

                                    

                                              .prev().css({"font-weight": "bolder",
                                    

                                  

                                  

                                    

                                                           "font-style": "italic"});
                                    

                                  

                                  

                                    

                                              });
                                    

                                  

                                  

                                    

                                          });
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page