Jquery Hover задерживается

Question

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

при наведении курсора на изображение .cover. Я использую jquery, чтобы изменить прозрачность, потому что CSS не работает в IE для этой цели.

Мой код:

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



    });
});

Я хочу, чтобы исчезновение было мгновенным, а не ждать 1 секунду. Есть идеи?

Answer 1

У вас есть две различные анимации, происходящие последовательно: первая .animate({ opacity: 0.7 }, 300) и вторая .fadeIn(300). Поскольку это конкурирующие эффекты, вероятно, ничто не поможет запустить их обоих.

Если .fadeIn() будет делать то, что вы хотите, попробуйте просто использовать это:

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