hide selected option in select box

I noticed strange behaviour with form select element and jQuery .fadeOut / .hide

I have simple select box:

<select name="categories">
  <optgroup label="Choose option:">
    <option selected="selected" value="placeholder">CHOOSE OPTION</option>
    <option value="category-books">Books</option>
    <option value="category-music">Music</option>
  </optgroup>
</select>

And with jQuery I wanted to remove option:selected (my way to emulate placeholder in this kind of box) when user click select with this code:

$('select').click(function() {
    $('option[value=placeholder]').fadeOut('slow');
});

$('select').blur(function(){
    $('option[value=placeholder]').fadeIn('slow');
});

This code in Firefox works and option smoothly fades out after is clicked, but in other bowsers (IE9, Opera, Chrome) this does'nt work :-[ Here You can check this out: http://jsfiddle.net/cachaito/Xy7DF/3/

I tried .remove (works) and .hide (doesn't) but I wanted an animation to hide this element...

PS. Do开发者_如何学Python You know better way to fadeIn option element when user leaves select box (focusout works the same way like .blur)?

Try Changing

$('option[value=placeholder]').fadeOut('slow')

with

$('option[value=placeholder]', this).fadeOut('slow')

This is what I do in my code to hide an "option"

$('#mySelect option[value=' + myVal + ']').hide().siblings().show();