jQuery淡入/淡出div到另一个div？

是否有可能让div淡出，然后在点击链接或按钮时使用不同内容的不同div淡入同一个地方？

它显然使用.fadeIn()和.fadeOut()函数，但我不确定所有代码的外观，特别是定位，以及在同一页面上执行两次的能力。

Answer 1

如果你想淡出一个然后淡入另一个 ：

 
 
 
Swap Divs
 $('#triggerButton').click(function(e){ e.preventDefault(); $('#div1').fadeOut('fast', function(){ $('#div2').fadeIn('fast'); }); }); 

如果你想要用另一个替换在同一个地方淡出的 ：

 
 
Swap Divs
 $('#triggerButton').click(function(e){ $('#div1').fadeOut('fast', function(){ $('#div1').replace('
').fadeIn('fast'); }); }); 

希望这可以帮助。

Answer 2

这里有两个盒子可以互相淡入淡出： http ： //jsfiddle.net/jfriend00/3XwZv/ 。

两个盒子使用position: absolute position: relative容器位于彼此的顶部。

一个淡出，另一个淡入，当一个完成时，它们反转过程。 jQuery代码如下所示：

 var fadeinBox = $("#box2"); var fadeoutBox = $("#box1"); function fade() { fadeinBox.stop(true, true).fadeIn(2000); fadeoutBox.stop(true, true).fadeOut(2000, function() { // swap in/out var temp = fadeinBox; fadeinBox = fadeoutBox; fadeoutBox = temp; // start over again setTimeout(fade, 1000); }); } // start the process fade(); 

HTML看起来像这样：

CSS看起来像这样：

 .box { position: absolute; height: 100px; width: 100px; } #wrapper {position: relative;} #box1 {background-color: #F00;} #box2 {background-color: #00F; display: none;} 

Answer 3

fadeIn()和fadeOut()

 $("#element1").fadeOut(); $("#element2").fadeIn();