fadeIn() / fadeOut() animation not playing

Question

Below I have this piece of code which I use to filter products with using a drop-down menu. The content of the #child_cat division changes based on the value attribute of the anchor tag:

$('#brandsort').change(function(){
    $('#child_cat a').fadeOut(500);
    $('[value="' + $(this).val() + '"]').fadeIn();
    if ($('#brandsort option:selected').text() === "") {
        $('#child_cat a').fadeIn(500);
    }
});

The code will filter out the products that do not match their option value, but it won't play the animation. Right now, it acts more like a delayed .show() / .hide() function than anything. Please enlighten me from any wrongdoing in my code or what I could possibly be doing wrong aside from that.

EDIT:

I know the people on SO would normally like some hands-on help from one of you, but in this case I was specifically only asking for "enlightenment". Just some verbal input of what I could have been doing wrong.

To fulfill your request of providing some HTML, you'll find it here: http://jsfiddle.net/HJPN8/3/

Answer 1

There was a few mistakes in the logic that made this not work. Firstly, the reason you couldn't see the fade animate happen is because fade uses the css property opacity. Opacity only works on block and inline-block elements, and you were using the .fadeOut() on a tags which are display:inline . So that can be fixed easily with this:

#child_cat a{
  display:block;
}

Next you're using .fadeOut() and .fadeIn() which both run at the same time meaning that the animations would both collide and not work properly. So you need to use callback functions to correctly time them. Below is the code I have refactored, I've included a lot of comments so you can see how it all works. The fade functions have been replaced with .animate() which is a lower end function that gives you more control which we need in this situation.

One last thing is that you were using the value attribute on your products, this isn't recommended as this property is specific to the options tag. If you wish to create custom attributes then the standard way is to prepend them with "data-" which you can see I've done here: http://jsfiddle.net/HJPN8/6/

$(function(){
  var brandsort = $('#brandsort');
  var products = $('#child_cat a');

  brandsort.on('change', function(e){
    var val = brandsort.val();
    // If search is blank then select all products to show else filter specific products.
    var filteredProducts = (val == '') ? products : products.filter('[data-value="' + val + '"]');

    // Hide products and set callback for when the animation has finished.
    // If we don't use a callback, the products will animate out and in at the same time, ruining the effect.
    products.animate({opacity: 0}, 300).promise().done(function(){
      // Now that he products' opacity is 0, we set them to display block to remove them from the flow of the DOM.
      products.css({display: 'none'});

      // Now Bring the filtered products back and animate them in again.
      filteredProducts.css({display: 'block'}).animate({opacity: 1}, 500);
    });
  });
});