Есть страница категории с товарами. По умолчанию видны все товары из категории. Наверху страницы есть список с подкатегориями, при нажатии на которых исчезают те товары которые не соответствуют подкатегории. Подробности работы скрипта и демо
вот здесь. При этом все неподходящие блоки захлапываются через animate(), что как то напрягает и жестоко смотрится при большом количестве товаров.
$(document).ready(function() {
$('.menu li a').click(function() {
$('.menu li').removeClass('selected');
$(this).parent('li').addClass('selected');
imgWidth = '52px';
thisItem = $(this).attr('rel');
if(thisItem != "all") {
$('.item li[rel='+thisItem+']').stop()
.animate({'width' : imgWidth,
'opacity' : 1,
'marginRight' : '.5em',
'marginLeft' : '.5em'
});
$('.item li[rel!='+thisItem+']').stop()
.animate({'width' : 0,
'opacity' : 0,
'marginRight' : 0,
'marginLeft' : 0
});
} else {
$('.item li').stop()
.animate({'opacity' : 1,
'width' : imgWidth,
'marginRight' : '.5em',
'marginLeft' : '.5em'
});
}
})
Сделал вот так:
.....
....
$('.item li[rel='+thisItem+']').stop().fadeIn()
.animate({'width' : imgWidth,
'opacity' : 1,
'marginRight' : '.5em',
'marginLeft' : '.5em'
}, 700 );
$('.item li[rel!='+thisItem+']').stop()
.fadeOut();
.....
.....
Сейчас все товары плавно исчезают и появляются, но при исчезновении ненужных товаров нужные резко перемещаются друг к другу. Как сделать плавное перемещение появившихся товаров друг к другу в то время, пока исчезают другие. Где-то видел такую реализацию, но так и не нашел. Борюсь с этим.
