.fadeIn()

.fadeIn( [ duration ], [ callback ] ) 返回: jQuery

描述: 通过淡入的方式显示匹配元素。

  • version added: 1.0.fadeIn( [ duration ], [ callback ] )

    duration一个字符串或者数字决定动画将运行多久。

    callback在动画完成时执行的函数。

  • version added: 1.4.3.fadeIn( [ duration ], [ easing ], [ callback ] )

    duration一个字符串或者数字决定动画将运行多久。

    easing一个用来表示使用哪个缓冲函数来过渡的字符串

    callback在动画完成时执行的函数。

.fadeIn()方法通过匹配元素的不透明度做动画效果。

延时时间是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 'fast''slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串,或者这个duration参数被省略,那么默认使用400毫秒的延时

如果提供回调函数参数,回调函数会在动画完成的时候调用。这个对于将不同的动画串联在一起按顺序排列是非常有用的。这个回调函数不设置任何参数,但是this是存在动画的DOM元素,如果多个元素一起做动画效果,值得注意的是这个回调函数在每个匹配元素上执行一次,不是这个动画作为一个整体。

我们可以给任何元素做动画,比如一个简单的图片:

<div id="clickme">
      Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123" />
    With the element initially hidden, we can show it slowly:
    $('#clickme').click(function() {
      $('#book').fadeIn('slow', function() {
        // Animation complete
      });
    });

注意:

  • 所有的jQuery效果,包括 .fadeIn(),能使用jQuery.fx.off = true关闭全局性。更多信息请查看jQuery.fx.off

Examples:

Example: 一个一个的隐藏divs,在600毫秒内完成这些动画。

<!DOCTYPE html>
<html>
<head>
  <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>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <span>Click here...</span>

    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
<script>
      $(document.body).click(function () {
        $("div:hidden:first").fadeIn("slow");
      });
    </script>

</body>
</html>

Demo:

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

<!DOCTYPE html>
<html>
<head>
  <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>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</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>
<script>
        $("a").click(function () {
          $("div").fadeIn(3000, function () {
            $("span").fadeIn(100);
          });
          return false;
        }); 

      </script>

</body>
</html>

Demo:

设计酷,jquery1.6 api中文手册