Question

您好我正试图淡化图像上的叠加层。我已经使用CSS3成功完成了它。但它没有慢慢消失，所以我想到了使用jQuery的.animate函数。但它根本不起作用

这是

Answer 1

嗨，我已经解决了这个问题。

$(document).ready(function () { 
    $("ul.search-item-list li").mouseover(function () {
        $(this).find(".sil-img-overlay").fadeIn();
    });

    $("ul.search-item-list li").mouseleave(function () {
        $(this).find(".sil-img-overlay").fadeOut('fast');
    });
});

请参阅以下链接。

http://jsfiddle.net/aCu36/3/

Answer 2

您无法为显示属性设置动画。您应该使用不透明度。

$(document).ready(function () {
    var speed = 500;
    $("ul.search-item-list li").on("mouseover", function () {
        $(this).find(".sil-img-overlay").stop().animate({
            opacity: 1
        }, speed);
    }).on("mouseout", function() {
        $(this).find(".sil-img-overlay").stop().animate({
            opacity: 0
        }, speed);
    });
});

演示 - ＆gt; http://jsfiddle.net/aCu36/11/

此外，如果您使用jquery，则无需设置过渡属性。

CSS3动画工作但jQuery没有成功

2 个答案: