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: /

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/

• javascript
• jquery
• css
• html

• 1 I recently took on a project that used a lot of animations, and noticed a lot of issues in chrome with these types of animations. Surprisingly enough, Firefox and IE had no problems. What kind of experience are you getting with those two browsers? – Brian Vanderbusch Commented Jun 10, 2013 at 1:15
• 1 Can you post an example on jsfiddle.net to illustrate the problem? – Anderson Green Commented Jun 10, 2013 at 1:26
• Working fine here in firefox – simonzack Commented Jun 10, 2013 at 1:48
• Sorry, didn't read question fully. I've had this issue on Chrome as well. You can try doing a manual $('span').animate({opacity:0},600) fade, this has helped mine before. – Casey Dwayne Commented Jun 10, 2013 at 1:48

1 Answer 1

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

transition:.5s ease-in-out;