衰落的div使用jQuery

我有以下的HTML代碼之間：衰落的div使用jQuery

<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的精確空間，並且不會使頁面的格式化跳轉。

來源

2017-01-31 thatguylowjwj

使用$(document).ready();作爲偵聽器。

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

使用淡入（），淡出（）有一個簡單的效果。

普通的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; 
}

來源

2017-01-31 02:35:55

對不起，也許我不清楚OP中，但試圖讓它下面的內容在轉換過程中四處移動。第一個div淡出，下面的內容跳轉，然後回落，因爲div 2開始淡入。 – thatguylowjwj

閱讀更新的內容:) –

非常感謝您的幫助，這非常接近，但第二個元素淡出到窗口頂部，是否有可能使它填充該部分？ – thatguylowjwj

使用$.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>

來源

2017-01-31 02:45:02

您可以輕鬆地使用切換類。 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/

我已經添加了點擊身體事件，你可以在那裏替換你自己的事件。

來源

2017-01-31 02:50:04

我現在可以認爲在兩個div之間無縫淡入（重疊每個div）的唯一方式是使用絕對定位進行重疊，問題是將兩者都發送到絕對位置不允許我們擴展容器（所以JavaScript/jQuery將需要處理）。

所以，你需要的東西，如：

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

當你這樣做的淡出/淡入的東西，申報單將在/出褪色相互重疊，不堆積，但是，你需要給一個高度爲<section >元素，它可以與＃最初和＃第之間的最高元素相同，也可以在淡入淡出切換完成後設置。

希望這可以幫助

來源

2017-01-31 02:50:41

衰落的div使用jQuery

回答

相關問題