Question

我有以下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而不会使页面的格式跳转。

Answer 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/

我添加了点击身体事件，你可以在那里替换你自己的事件。

Answer 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;
}

Answer 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>

Answer 4

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

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

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

当你执行fadeOut / fadeIn时，div会使淡入/淡出相互重叠，而不是叠加，但是，你需要给<section >元素赋予一个高度，这可以是相同的 #first 和 #second 之间的最高元素，或者您也可以在淡入淡出切换完成后设置。

希望这有帮助

与Jquery在Div之间褪色

4 个答案: