JQuery disappears without animation

Question

I use jQuery for fade on .hover to hide the element and make it visible again on mouseexit, but when I run the .fadeOut () method, no matter what time I enter, or if I leave it by default, it expects duration, then (dis) appears instantly, rather than slowly disappearing / during the duration. I'm on the latest version of chrome. Anyone else come across this?

$(document).ready(function(){ $(".navbutton").hover( function() { $('span.linktext, span.linkdropcap').fadeOut(); }, function() { $('span.linktext, span.linkdropcap').fadeIn(); } ); }); 

Other browsers give me the same behavior.

See this jsFiddle: http://jsfiddle.net/TXrDk/

Answer 1

Take this from the elements you want to fade, and it works great. Example: jsfiddle

 transition:.5s ease-in-out;