使用 Jquery 在 Div 之间淡入淡出答案

【问题标题】：Fading Between Div's with Jquery使用 Jquery 在 Div 之间淡入淡出
【发布时间】：2017-01-31 02:31:41
【问题描述】：

我有以下 HTML 代码：

<section>

<div id="first">
---content
</div>

<div id="second">
---content
</div>

</section>

页面加载后，第二个 div 及其内容是不可见的（我不知道使用 .hide() 还是 CSS 更好）。我想使用 Jquery 在页面上进行一些交互时，使第一个 div 淡出并替换为第二个 div。

到目前为止，我自己使用了fadein() 和fadeout()，但是它使div 在页面上跳来跳去。我正在尝试无缝淡出 div 1 的内容并替换为 div 2，消耗与 div 1 完全相同的空间，并且不会使页面的格式跳来跳去。

【问题讨论】：

标签： jquery html css

【解决方案1】：

您可以轻松地使用切换类。 I don't recommend doing fadeIn and fadeOut.

CSS

    #first {
        background-color: red;
        height: 250px;
        opacity: 1;
        -webkit-transition: .25s all ease;
           -moz-transition: .25s all ease;
            -ms-transition: .25s all ease;
             -o-transition: .25s all ease;
                transition: .25s all ease;
    } 

    #second {
        background-color: green;
        height: 250px;
        opacity: 1;
        -webkit-transition: .25s all ease;
           -moz-transition: .25s all ease;
            -ms-transition: .25s all ease;
             -o-transition: .25s all ease;
                transition: .25s all ease;
    }

    .hidden {
        height: 0 !important;
        opacity: 0 !important;
    }

HTML

    <section id="parent">
        <div id="first">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sequi iure, nesciunt laudantium a beatae autem, commodi culpa, quasi vitae sint ad. Itaque repellat cum voluptate, est aut provident ipsum?
        </div>
        <div id="second" class="hidden">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sequi iure, nesciunt laudantium a beatae autem, commodi culpa, quasi vitae sint ad. Itaque repellat cum voluptate, est aut provident ipsum?
        </div>
    </section>

Javascript

jQuery(document).ready(function(){
    $('body').click(function(){
        $('#first, #second').toggleClass('hidden');
    });
});

小提琴链接：https://jsfiddle.net/bngnxty9/

我已经添加了点击正文事件，你可以在那里替换你自己的事件。

【讨论】：

【解决方案2】：

使用$(document).ready(); 作为监听器。

$(document).ready(function(){
    $("#first").fadeOut();
    $("#second").fadeIn();
});

使用fadeIn()、fadeOut()来实现简单的效果。

纯javascript

var first = document.getElementById('first'),
    second = document.getElementById('second');

window.onload = function() {
   first.style.display = 'none';
   second.style.display = 'block';
}

更新：

在您的情况下，使用position: relative on section 并将position: absolute; top: 0; left: 0; right: 0; bottom: 0; 放在孩子身上。 (#first, #second)

#first, #second {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

【讨论】：

对不起，也许我在 OP 中并不清楚，但是当尝试它使下面的内容在过渡期间移动时。第一个 div 淡出，当 div 2 开始淡入时，下面的内容会向上跳，然后又向下跳。
非常感谢您的帮助，这非常接近，但第二个元素逐渐消失到窗口顶部，是否可以让它填充该部分？
到目前为止，这很完美，谢谢 :D 我认为可能需要复杂的 javascript，结果只是一些漂亮的定位！
很高兴我能帮上忙。一次，你掌握了位置相对绝对关系。它可以让您的布局更上一层楼。

【解决方案3】：

使用$.fadeOut() 淡出#first 并让#second 在#first 消失的同时显示，使用$.fadeOut() 中的回调

$("button").on('click',function() {
  $('#first').fadeOut(function() {
    $('#second').removeClass('hidden');
  })
})

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  first</div>

<div id="second" class="hidden">
  second</div>

<button>click</button>

【讨论】：

【解决方案4】：

我现在能想到的在两个 div 之间无缝淡入淡出（每个都重叠）的唯一方法是使用绝对定位使两者重叠，问题是将两者都发送到绝对位置不允许我们扩展容器（所以需要 JavaScript/jQuery 来处理它）。

所以，你需要这样的东西：

  section {
    position: relative;
  }
  #first, #second {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

当你做fadeOut/fadeIn的事情时，divs会让淡入/淡出相互重叠，而不是堆叠，但是，你需要给<section >元素一个高度，这可以是相同的#first 和 #second 之间的最高元素，也可以在渐变切换完成后设置。

希望对你有帮助

【讨论】：