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'); }
    );
});