jQuery fade not Animating Smoothly

Question

I'm using jQuery fade on .hover to hide an element, and make it reappear on mouseexit, but when I run the .fadeOut() method, regardless of the duration I enter, or if I leave it to the default, it waits the duration then (dis)appears instantly rather than slowly fading out/in over the duration. I'm on the latest version of chrome. Anyone else run into this?

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

Other browsers are giving me the exact same behavior.

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

Answer 1

Take this out of the elements you want to fade, and it works fine. example: jsfiddle

transition:.5s ease-in-out;