Jquery Hover is delayed

Question

http://wesbos.com/tf/shutterflow/?cat=3

when one hovers over an image .cover is faded in. I use jquery to change the opacity because CSS doesn't work in IE for this purpose.

My code is:

$(document).ready(function () {
    $('.slide').hover(function () {
        $(".cover").animate({
            opacity: 0.7
        }, 300).fadeIn('300');
    }, function () {
        $(".cover").animate({
            opacity: 0
        }, 300).fadeOut('300');



    });
});

I want the fade in to be instant, not wait 1 second. Any ideas?

Answer 1

You have two different animations happening sequentially: first, .animate({ opacity: 0.7 }, 300) and second .fadeIn(300). Since those are competing effects, it's probably not helping anything to have them both running.

If .fadeIn() will do what you want, try just using that:

$(document).ready(function() {
    $('.slide').hover(
        function() { $(".cover").fadeIn('300'); },
        function() { $(".cover").fadeOut('300'); }
    );
});