javascript - Jquery 悬停延迟

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