$('#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之下,然后向上移动到位。
答案 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)
我在项目周围添加了一个包装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;
});