javascript - fadeIn() / fadeOut() animation not playing -

below have piece of code use filter products using drop-down menu. content of #child_cat division changes based on value attribute of 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 filter out products not match option value, won't play animation. right now, acts more delayed .show() / .hide() function anything. please enlighten me wrongdoing in code or possibly doing wrong aside that.

edit:

i know people on hands-on 1 of you, in case asking "enlightenment". verbal input of have been doing wrong.

to fulfill request of providing html, you'll find here: http://jsfiddle.net/hjpn8/3/

there few mistakes in logic made not work. firstly, reason couldn't see fade animate happen because fade uses css property opacity. opacity works on block , inline-block elements, , using .fadeout() on tags display:inline. can fixed this:

#child_cat a{   display:block; } 

next you're using .fadeout() , .fadein() both run @ same time meaning animations both collide , not work properly. need use callback functions correctly time them. below code have refactored, i've included lot of comments can see how works. fade functions have been replaced .animate() lower end function gives more control need in situation.

one last thing using value attribute on products, isn't recommended property specific options tag. if wish create custom attributes standard way prepend them "data-" 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 blank select products show else filter specific products.     var filteredproducts = (val == '') ? products : products.filter('[data-value="' + val + '"]');      // hide products , set callback when animation has finished.     // if don't use callback, products animate out , in @ same time, ruining effect.     products.animate({opacity: 0}, 300).promise().done(function(){       // products' opacity 0, set them display block remove them flow of dom.       products.css({display: 'none'});        // bring filtered products , animate them in again.       filteredproducts.css({display: 'block'}).animate({opacity: 1}, 500);     });   }); });