ドキュメント

Effects/fadeTo

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

fadeTo( speed, opacity, [callback] )

Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
Only the opacity is adjusted for this animation, meaning that all of the matched elements should already have some form of height and width associated with them.
Arguments:

speedString, Number
A string representing one of the predefined speeds ("slow" or "fast") or the number of milliseconds to run the animation (e.g. 1000).
opacityNumber
The opacity to fade to (a number from 0 to 1).
callback (Optional)Function
A function to be executed whenever the animation completes, executed once for each element animated against.
function callback() {
  this; // dom element
}
Examples:

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

    $("p:first").click(function () {
      $(this).fadeTo("slow", 0.33);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("p:first").click(function () {
      $(this).fadeTo("slow", 0.33);
    });

  });
  </script>
  
</head>
<body>
  <p>
    Click this paragraph to see it fade.
  </p>
  <p>
    Compare to this one that won't fade.
  </p>
</body>
</html>

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

    $("div").click(function () {
      $(this).fadeTo("fast", Math.random());
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("div").click(function () {
      $(this).fadeTo("fast", Math.random());
    });

  });
  </script>
  <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>
</head>
<body>
  <p>And this is the library that John built...</p>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</body>
</html>

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

    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"});
                      });
                });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    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>
  <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>
</head>
<body>
  <p>Wrong</p>
  <div></div>
  <p>Wrong</p>
  <div></div>
  <p>Right!</p>
  <div></div>
</body>
</html>

NameType