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

问题描述

是否可以让div淡出，然后在单击链接或按钮时在具有不同内容的另一个div处在同一位置淡入淡出?

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?

它显然会使用.fadeIn()和.fadeOut()函数，但是我不确定所有代码是什么样的，尤其是在定位以及在同一页面上可以执行两次的功能时.

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.

推荐答案

如果要淡出一个</div>，然后淡入另一个:

If you're looking to fade out one </div> then fade in a different one:

<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>替换为另一个位置:

If you're looking to replace the </div> that is faded out in the same place with a different one:

<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');
    });
});

希望这会有所帮助.

这篇关于jQuery淡入/淡出div到另一个div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！