Question

这里我有一个简单的JSFiddle示例：http://jsfiddle.net/LKwmW/

如果你看看，你会看到当你点击“更改”按钮时，红色div将完全淡出，然后蓝色div将淡入。我几乎想要它们混合，所以基本上它们同时淡入淡出，而它们仍然保持在彼此之上。虽然，如果可能的话，我宁愿文本不融合和融合，因为它看起来会很混乱。也许文字会在混合发生后淡出？

这是HTML：

<button id="change">Change </button>

<div id="box1">
    <p> Hello, this is text1 </p>
</div>

<div id="box2">    
    <p> Goodbye, this is text2 </p>

</div>

这是jQuery：

$('#box2').hide()

$('#change').click(function(){
    $('#box1').fadeOut(800, function(){
        $('#box2').fadeIn(800);
    });

});

我将如何实现这一目标？

Answer 1

只需删除回调，并将元素放在彼此的顶部：

$('#box2').hide()

$('#change').click(function(){
    $('#box1').fadeOut(800);
    $('#box2').fadeIn(800);
});

FIDDLE

文本位于元素内部，并且随着元素逐渐消失，以避免您必须将文本移出元素或使用CSS过渡来仅为背景颜色设置动画。

Answer 2

您还可以使用animate实现效果，而无需多个div

尝试这样的事情

$('#box2').hide()

$('#change').click(function(){
   $("#box1").animate({
       backgroundColor:"blue"
  }, 1500 );
});

JS Fiddle Demo

Answer 3

（文档）$。就绪（函数（）{

    $('.fadeImg img').css({'position':'absolute'});

    nextFadeIn();
});

function nextFadeIn（）{

    $('.fadeImg').eq($next).delay($interval).fadeIn($fadeTime);

    $('.fadeImg').eq($current).delay($interval).fadeIn($fadeTime, function() {
    $('.fadeImg').eq($next).delay($interval).fadeIn($fadeTime);
    }).end().eq($current).delay($interval).fadeOut($fadeTime, nextFadeIn);

    if($next < $('.fadeImg').find('img').length-1){ $next++; } else { $next = 0;}
    if($current < $('.fadeImg').find('img').length-1){ $current++; } else { $current =0; }
    $(".active").fadeOut($fadeTime);

};

Answer 4

如果您知道要切换的div的大小，则

Adeneo's answer可以正常工作。当您不知道身高和孩子的身高可以彼此不同但您仍然希望父母使用较大孩子的身高时，这里的解决方案。

这允许比较两个div的差异，而在切换内容时不会使比较div下方的所有内容“跳”。主要思想：使用网格进行定位，使用不透明度使前景div不可见。

map.get([0, 1, 2, 3])

jQuery.fn.visible = function(duration) {
    this.animate({opacity: 1.0}, duration);
};

jQuery.fn.invisible = function(duration) {
    return this.animate({opacity: 0}, duration);
};

var b = false;
$('#change').click(function(){
    if(b){
    $('.child2').visible(1000);
  } else {
    $('.child2').invisible(1000);
  }
  b = !b;
});

.parent {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid black;
}
.child1 {
    grid-row-start: 1;
    grid-column-start: 1;
    background-color: yellow;
}
.child2 {
    grid-row-start: 1;
    grid-column-start: 1;
    background-color: pink;
}

两个div FadeIn和FadeOut同时在彼此之上

4 个答案: