jQuery 淡入/淡出 div 到不同的 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7773768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery fade in/out div to a different div?
提问by Charlie
Is it possible to have a div fade out, then fade in at the same place with a different div with different content when you click a link or button?
当您单击链接或按钮时，是否可以让 div 淡出，然后在具有不同内容的不同 div 的同一位置淡入？
It'd obviously use the .fadeIn()and .fadeOut()functions but I'm not sure what all the code would look like, especially with positioning, and the ability to do it twice on the same page.
它显然会使用.fadeIn()和.fadeOut()函数，但我不确定所有代码会是什么样子，尤其是定位，以及在同一页面上执行两次的能力。
回答by dSquared
If you're looking to fade out one </div>then fade in a different one:
如果您想淡出一个，</div>然后淡入另一个：
<div id="div1"></div>
<div id="div2" style="display: none"></div>
<div><a href="#" id="triggerButton">Swap Divs</a></div>
$('#triggerButton').click(function(e){
e.preventDefault();
$('#div1').fadeOut('fast', function(){
$('#div2').fadeIn('fast');
});
});
If you're looking to replace the </div>that is faded out in the same place with a different one:
如果您想用不同的替换</div>在同一位置淡出的 ：
<div id="div1"></div>
<div><a href="#" id="triggerButton">Swap Divs</a></div>
$('#triggerButton').click(function(e){
$('#div1').fadeOut('fast', function(){
$('#div1').replace('<div id="div2"></div>').fadeIn('fast');
});
});
Hope this helps.
希望这可以帮助。
回答by jfriend00
Here are two boxes that alternate fading in and out on top of one another: http://jsfiddle.net/jfriend00/3XwZv/.
这是两个交替淡入和淡出的盒子：http: //jsfiddle.net/jfriend00/3XwZv/。
The two boxes are positioned on top of one another using position: absolutein a position: relativecontainer.
这两个盒子position: absolute在position: relative容器中放置在彼此的顶部。
One fades out, the other fades in and when one completes, they reverse the process. The jQuery code looks like this:
一个淡出，另一个淡入，当一个完成时，他们逆转了这个过程。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();
The HTML looks like this:
HTML 如下所示：
<div id="wrapper">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
The CSS looks like this:
CSS 看起来像这样：
.box {
position: absolute;
height: 100px;
width: 100px;
}
#wrapper {position: relative;}
#box1 {background-color: #F00;}
#box2 {background-color: #00F; display: none;}
