1

这里我有简单的 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);
    });

});

我将如何实现这一目标？

4

3 回答 3

2

只需删除回调，并将元素放在一起：

$('#box2').hide()

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

小提琴

文本在元素内部，并随着元素淡出，以避免您必须将文本移出元素或使用 CSS 过渡来仅对背景颜色进行动画处理。

于 2013-05-25T16:54:23.977 回答
0

您也可以在animate没有多个的情况下使用div

尝试这样的事情

$('#box2').hide()

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

JS 小提琴演示

于 2013-05-25T17:01:41.247 回答
0

如果您知道要切换的 div 的大小， Adeneo 的答案就可以正常工作。这是一个解决方案，当您不知道身高并且孩子的身高可能彼此不同但您仍然希望父母使用较大孩子的身高时。

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

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="change">Toggle child 1</button>

<div class="parent">
    <div class="child1">child 1</div>
    <div class="child2">child 2</div>
</div>
<br/>
<div class="parent">
    <div class="child1">child 1<br/>very long content</div>
    <div class="child2">child 2</div>
</div>
<br/>
<div class="parent">
    <div class="child1">child 1</div>
    <div class="child2">child 2<br/>very long content</div>
</div>

于 2020-01-17T09:00:40.443 回答