修复fadeIn和fadeOut过渡重叠

时间:2013-09-02 21:08:39

标签: jquery

$('#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/

2 个答案:

答案 0 :(得分:0)

尝试向链接和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作为已经显示的第一个项目,Ross说:

#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');
    });
  });
});

答案 1 :(得分:0)

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