jQuery文本交叉淡入淡出效果

Question

jQuery文本交叉淡入淡出效果

jquery

8

我知道有各种不同的图像淡入淡出插件，但我需要淡入淡出文本。比如，我有一个包含文本A的

、或

元素，我想让它淡出，同时淡入B。
非常感谢您的帮助。

- pistacchio

2个回答

5

非常简单的例子

<div>
<div style="position:absolute;" id="div1">Hello</div>
<div style="position:absolute;" id="div2">World</div>
</div>

<script>
        $("#div2").hide( );
        $("#div2").fadeIn( 3000 );
        $("#div1").fadeOut( 3000 );
</script>

- Kane Wallmann

为了确保fadeIn / FadeOut按顺序发生，您可能需要执行以下操作： $（“#div2”）.fadeIn（3000）; $（“#div1”）.delay（3001）.fadeOut（3000）; - matthewdunnam

2

@Matt：事实上，fadeIn接受一个callback，因此您不需要进行delay。 - Dan Abramov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- redsquare · Accepted Answer

这里有一个快速演示，点击这里查看。

 <html>    
   <head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
   <script type="text/javascript">
      $(function() {
            $('#test').fadeOut(2000);
            $('#test1').fadeIn(2000);
      });
    </script>
    <style>
       h1 {font-size:12em;position:absolute; left:0;top:0}
       #test1 {display:none}
    </style>
    </head>
    <body>
       <h1 id="test">A</h1> 
       <h1 id="test1">B</h1>
    </body>
    </html>

jQuery文本交叉淡入淡出效果

元素，我想让它淡出，同时淡入B。非常感谢您的帮助。

元素，我想让它淡出，同时淡入B。
非常感谢您的帮助。