jQuery的沒有一套高度淡入

Question

我有這個基於jQuery淡入淡出和其日常工作是偉大的..

<ul> 
    <li class="tab"><a class="link" href="#" data-rel="content1">Link 1</a></li> 
    <li class="tab"><a class="link" href="#" data-rel="content2">Link 2</a></li> 
    <li class="tab"><a class="link" href="#" data-rel="content3">Link 3</a></li> 
    <li class="tab"><a class="link" href="#" data-rel="content4">Link 4</a></li> 
    <li class="tab"><a class="link" href="#" data-rel="content5">Link 5</a></li> 
</ul> 

<div class="content-container"> 
    <div id="content1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis eros tincidunt sem feugiat eleifend. Ut commodo lectus eu ultricies semper. Mauris pellentesque malesuada urna quis interdum. Nam urna lacus, tempus id dictum non, imperdiet vel nibh. Aliquam ornare auctor lorem, non blandit velit fringilla quis. Ut eget arcu at eros interdum tincidunt sed sed velit. Donec feugiat lectus magna, eget tincidunt erat tempus nec. Nam eget est diam. Quisque commodo facilisis odio eget sodales. Fusce sollicitudin dui magna, a mattis sem ornare id. Maecenas hendrerit fermentum nibh scelerisque varius.</div> 
    <div id="content2">This is the test content for part 2</div> 
    <div id="content3">This is the test content for part 3</div> 
    <div id="content4">This is the test content for part 4</div> 
    <div id="content5">This is the test content for part 5</div> 
</div> 


Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 

jQuery(function() { 
    jQuery(".link").click(function() { 
     if(jQuery(this).hasClass('active')) { 
     return; 
     } 

     jQuery('.active').removeClass('active'); 
     jQuery(this.parentNode).addClass('active'); 

     jQuery('.content-container div').fadeOut('slow'); 
     jQuery('#' + jQuery(this).data('rel')).fadeIn('slow'); 
    }); 
}); 

http://jsfiddle.net/my5pqas5/

我的問題是，這是在褪色的DIV內容重疊現有內容。我知道我可以通過爲div設置一個高度來解決這個問題，但是我的內容是按照yyan生成的，因此是不同的高度。

我該如何解決？在CSS自動高度沒有任何影響

Answer 1

使用相對定位的，而不是絕對

完全工作搗鼓你http://jsfiddle.net/3vhLsnx1/

jQuery(function() { 
 
    jQuery(".link").click(function() { 
 
     if(jQuery(this.parentNode).hasClass('active')) { 
 
     return; 
 
     } 
 

 
     jQuery('.active').removeClass('active'); 
 
     jQuery(this.parentNode ).addClass('active'); 
 
     var container= this; 
 
     jQuery('.content-container div').fadeOut('slow').promise().done(function(){showData(container)}); 
 
     
 
    }); 
 
    function showData(container){ 
 
    jQuery('#' + jQuery(container).data('rel')).fadeIn('slow');} 
 
});

.content-container { 
 
    position: relative; 
 
} 
 
.content-container div { 
 
    display: none; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul> 
 
    <li class="tab"><a class="link" href="#" data-rel="content1">Link 1</a></li> 
 
    <li class="tab"><a class="link" href="#" data-rel="content2">Link 2</a></li> 
 
    <li class="tab"><a class="link" href="#" data-rel="content3">Link 3</a></li> 
 
    <li class="tab"><a class="link" href="#" data-rel="content4">Link 4</a></li> 
 
    <li class="tab"><a class="link" href="#" data-rel="content5">Link 5</a></li> 
 
</ul> 
 

 
<div class="content-container"> 
 
    <div id="content1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis eros tincidunt sem feugiat eleifend. Ut commodo lectus eu ultricies semper. Mauris pellentesque malesuada urna quis interdum. Nam urna lacus, tempus id dictum non, imperdiet vel nibh. Aliquam ornare auctor lorem, non blandit velit fringilla quis. Ut eget arcu at eros interdum tincidunt sed sed velit. Donec feugiat lectus magna, eget tincidunt erat tempus nec. Nam eget est diam. Quisque commodo facilisis odio eget sodales. Fusce sollicitudin dui magna, a mattis sem ornare id. Maecenas hendrerit fermentum nibh scelerisque varius.</div> 
 
    <div id="content2">This is the test content for part 2</div> 
 
    <div id="content3">This is the test content for part 3</div> 
 
    <div id="content4">This is the test content for part 4</div> 
 
    <div id="content5">This is the test content for part 5</div> 
 
</div> 
 

 

 
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.

Answer 2

給position:relative到.content-container div

或者只是因爲相對位置代碼中的.content-container已經給了你可以刪除.content-container divposition。

工作小提琴 - http://jsfiddle.net/Ashish_developer/y7s2bu3r/