Question

I’m trying to use jQuery to filter a table on a page. I would like to fade out the currently displayed rows and fade in the rows matching the new selection. My jQuery code looks like this:

$('#details-table tr').hide();
var previousFilterResult = $();
var selects = $('#search-panel > select');
selects.change(function () {
    selects.attr('disabled', 'disabled');
    var filterResult = filterTable();

    previousFilterResult.hide('slow', function () {
        filterResult.fadeIn('slow', function () {
            selects.removeAttr('disabled');
        });
    });

    previousFilterResult = filterResult;
});

My problem is that when I initialize previousFilterResult with $() the code does not work as it never seems to hit the callback for the previousFilterResult.hide call. If I put a dummy div in the page and initialize previousFilterResult with $(‘#dummyDiv’) it works fine.

Is there any way I can initialize previousFilterResult without putting a dummy div on the page so that the above code still works?

Thanks.

Answer 1

No, you can’t.

From the documentation :

it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

But you can easily change your code to

$('#details-table tr').hide();
var previousFilterResult = null;
var selects = $('#search-panel > select');
selects.change(function () {
    selects.attr('disabled', 'disabled');
    var filterResult = filterTable();
    var callback = function () {
        filterResult.fadeIn('slow', function () {
            selects.removeAttr('disabled');
        });
    };
    if (previousFilterResult) previousFilterResult.hide('slow', callback);
    else callback();
    previousFilterResult = filterResult;
});

This is cleaner than using $() which feel like a hack in my opinion.