jquery - 修复 fadeIn 和 fadeOut 过渡重叠

Question

$('#btn').click(function(e) {    
    $('#minimalist, #typographic, #abstract').fadeOut('slow', function() {
        $('#all').fadeIn('slow');
    });
});

$('#btn2').click(function(e) {    
    $('#all, #typographic, #abstract').fadeOut('slow', function() {
        $('#minimalist').fadeIn('slow');
    });
});

$('#btn3').click(function(e) {    
    $('#all, #minimalist, #abstract').fadeOut('slow', function() {
        $('#typographic').fadeIn('slow');
    });
});

$('#btn4').click(function(e) {    
    $('#all, #typographic, #minimalist').fadeOut('slow', function() {
        $('#abstract').fadeIn('slow');
    });
});

我正在为类别制作过滤系统。

我希望 div 在淡入/淡出时重叠，而不是出现在淡出 div 下方，然后向上移动到位。

http://jsfiddle.net/FgWHD/23/

Answer 1

http://jsfiddle.net/z4tH6/1/

我在项目周围添加了一个包装 div：

<div class="w">
  <div id="minimalist">Minimalist</div>
  <div id="typographic">Typographic</div>
  <div id="abstract">Abstract</div>
  <div id="all">All</div>
</div>

在 CSS 中，我使用了“没有位置的绝对位置”技巧：

.w > div {
    position: absolute;
}

.w > div:last-child {
    position: static;
}

jQuery：

$('a').click(function(){
    var id = '#'+$(this).text().toLowerCase();
    var $clicked = $(id);

    // ensure position: static by moving to the last position
    $clicked.appendTo( $clicked.parent() );

    $('.w > :not('+id+')').fadeOut( 1000, function(){
        $clicked.fadeIn( 1000 );
    });

    return false;
});

Answer 2

尝试向链接和 div 添加一个类，如下所示：

<div><a class="link" href="#" id="btn">All</a></div>
<div><a class="link" href="#" id="btn2">Minimalist</a></div>
<div><a class="link" href="#" id="btn3">Typographic</a></div>
<div><a class="link" href="#" id="btn4">Abstract</a></div>

<div class="x" id="all">All</div>
<div class="x" id="minimalist">Minimalist</div>
<div class="x" id="typographic">Typographic</div>
<div class="x" id="abstract">Abstract</div>

.. 并使用 position:absolute 作为罗斯所说的已经显示的第一个项目：

#all {display:show; position:absolute;}
#minimalist {display:none;}
#typographic {display:none;}
#abstract {display:none;}

然后您可以使用 .not() 函数来排除与必须为 fadeIn/fadeOut 的类匹配的元素：

$(document).ready( function() {
$('.link').click( function() {
 var exclude = $(this).html().toLowerCase();
    $('.x').not('#' + exclude).fadeOut('slow', function() {
       $('#' + exclude).fadeIn('slow').css('position', 'absolute');
    });
  });
});