ドキュメント

Effects/fadeIn

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Effects

fadeIn( speed, [callback] )

Fade in all matched elements by adjusting their 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).
callback (Optional)Function
A function to be executed whenever the animation completes, executes once for each element animated against.
function callback() {
  this; // dom element
}
Examples:

Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.

    $(document.body).click(function () {
      $("div:hidden:first").fadeIn("slow");
    });

<!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(){
    
    $(document.body).click(function () {
      $("div:hidden:first").fadeIn("slow");
    });

  });
  </script>
  <style>
  span { color:red; cursor:pointer; }
  div { margin:3px; width:80px; display:none;
        height:80px; float:left; }
  div#one { background:#f00; }
  div#two { background:#0f0; }
  div#three { background:#00f; }
  </style>
</head>
<body>
  <span>Click here...</span>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</body>
</html>

Fades a red block in over the text. Once the animation is done, it quickly fades in more text on top.

    $("a").click(function () {
      $("div").fadeIn(3000, function () {
        $("span").fadeIn(100);
      });
      return false;
    }); 

<!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(){
    
    $("a").click(function () {
      $("div").fadeIn(3000, function () {
        $("span").fadeIn(100);
      });
      return false;
    }); 

  });
  </script>
  <style>
  p { position:relative; width:400px; height:90px; }
  div { position:absolute; width:400px; height:65px; 
        font-size:36px; text-align:center; 
        color:yellow; background:red;
        padding-top:25px; 
        top:0; left:0; display:none; }
  span { display:none; }
  </style>
</head>
<body>
  <p>
    Let it be known that the party of the first part
    and the party of the second part are henceforth
    and hereto directed to assess the allegations
    for factual correctness... (<a href="#">click!</a>)
    <div><span>CENSORED!</span></div>
  </p>
</body>
</html>

NameType