0

所以我有一个div：

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

我还有其他 div：

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

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

4

6 回答 6

2

我认为这很有效。

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

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

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


});

这是一个演示小提琴

或者你甚至可以像这样切换效果

于 2013-09-05T17:38:59.853 回答
0

我认为这就是你想要的：

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

JSFIDDLE

于 2013-09-05T17:39:25.683 回答
0

您可以向这两个 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

于 2013-09-05T17:50:30.220 回答
0

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

$('#lol').fadeOut(function() {
  $('#happy').fadeIn();
});
于 2013-09-05T17:34:59.937 回答
0 
$("#lol").fadeOut(1000,function(){

$("#happy").fadeIn();
});
于 2013-09-05T17:35:42.133 回答
0

如果您使用绝对定位，则使用淡出/淡入将起作用。还有许多其他选择。

我完全不确定您希望在最终结果中看到什么，但这里有一些示例：

示例小提琴

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);
于 2013-09-05T17:56:10.173 回答