jQuery内容过滤器褪色效果

Question

---

I wrote a little jquery content filter: jsfiddle .

If I switch between "gfx" and "coding" for example I get this ugly height reseizing effect on the red parent div. My goal is fading the little divs out then in, at the same place. Without any resizing and without using a fixed height. (Number of items can differ later)

Any hints how I can achieve this?

var filter = $(this).attr('data-filter');
$('#filter_container .filteritem:not(' + filter + ')').fadeOut('slow', function () {
    $('#filter_container ' + filter + '').fadeIn('fast');
});

For details and working example see the jsfiddle.

Answer 1

http://jsfiddle.net/k6BPs/8/

The fadeOut() callback is apparently called for each element. See here . That way it will be triggered right away preventing a nice fadeIn() effect after the fadeOut().

You can overcome this problem by using the .promise() and .done(function(){}) methods though.