jquery - CSS3 动画工作但 jQuery 没有成功

Question

嗨，我正在尝试淡化图像上的叠加层。我已经使用 CSS3 成功完成了它。但它并没有慢慢褪色，所以我想到了使用.animatejQuery的功能。但它根本不起作用

CSS3 演示

这是

jQuery 演示

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

您不能为display属性设置动画。您应该为此目的使用不透明度。

$(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);
    });
});

演示-> http://jsfiddle.net/aCu36/11/

此外，如果您使用 jquery，则不需要设置转换属性。