Question

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

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

Answer 1

如果您希望淡出一个</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');
    });
});

如果您想要使用不同的地方替换在同一个地方淡出的</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');
    });
});

希望这有帮助。

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看起来像这样：

<div id="wrapper">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
</div>

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();

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

3 个答案: