Question

所以我有一个div：

<div id="lol">
Some random text!
</div>

我还有其他div：

<div id="happy">
lol
</div>

如何制作动画，其中第一个div被第二个div平滑替换？如果做一个fadeIn / fadeOut，第二个div只会在第一个div消失后才开始发生。

Answer 1

我认为这只会有用。

$("#happy").hide();

$("#smooth").click(function(){

    $("#happy").show();//no transition for this
    $("#lol").slideUp();//with transition


});

这是一个demo fiddle

或者您甚至可以切换效果，如this

Answer 2

是。很容易。假设#lol是可见的而#happy不是。（您可以使用jQuery的show / hide来设置它。）

$('#lol').fadeOut(function() {
  $('#happy').fadeIn();
});

Answer 3

$("#lol").fadeOut(1000,function(){

$("#happy").fadeIn();
});

Answer 4

我认为这就是你想要的：

$("button").click(function () {
$(".happy").toggle('slow');
});

JSFIDDLE

Answer 5

您可以为这两个div添加一个类，然后切换该类。这将允许两个同时切换（一个淡入同时另一个淡出）。

HTML

<div id="lol" class="toggle">
Some random text!
</div>
<div id="happy" class="toggle">
lol
</div>
<button id="btn">Replace</button>

JQuery的

$("#happy").hide();

$("#btn").click(function() {
    $(".toggle").toggle(2000);
});

JSFiddle

Answer 6

如果使用绝对定位，使用fadeOut / fadeIn将起作用。还有很多其他选择。

我不确定您希望在最终结果中看到什么，但这里有几个例子：

Example fiddle

CSS：

div.container {
    position: relative;
    height: 30px;
}
div.container div {
    position: absolute;
    top: 0;
    left: 0;
}

HTML：

<div class="container">
    <div id="lol">Some random text!</div>
    <div id="happy" style="display: none">lol</div>
</div>
<div class="container">
    <div id="lol1">Some random text!</div>
    <div id="happy1" style="display: none">lol</div>
</div>
<div class="container">
    <div id="lol2">Some random text!</div>
    <div id="happy2" style="left: -200px">lol</div>
</div>
<div class="container">
    <div id="lol3">Some random text!</div>
    <div id="happy3" style="left: 200px; opacity: 0;">lol</div>
</div>

示例代码：

$('#lol').fadeOut(1000);
$('#happy').fadeIn(1000);


$('#lol1').slideUp(1000);
$('#happy1').slideDown(1000);

$('#lol2').animate({left: -200});
$('#happy2').animate({left: 0});


$('#lol3').animate({left: -200}, 1000);
$('#happy3').animate({left: 0, opacity: 1}, 1500);

jQuery UI replaceWith（）动画？

6 个答案: