Question

我有这个基于jQuery的fadein和fadeout例程，效果很好..

<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的高度来解决这个问题，但我的内容是动态生成的，因此高度不同。

我该如何解决？ CSS中的自动高度没有任何影响

Answer 1

将position:relative提交给.content-container div

或者只是您可以从position删除.content-container div，因为您的代码中已经为.content-container提供了相对位置。

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

Answer 2

使用相对定位而不是绝对

为你完全工作的小提琴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.

没有设定高度的jQuery fadein

2 个答案: