jquery - CSS3 アニメーションは機能しますが、jQuery では成功しません

Question

こんにちは、画像の上にオーバーレイをフェードしようとしています。CSS3を使用して成功しました。でもなかなか消えないので.animate、jQueryの機能を使ってみようと思いました。しかし、まったく機能していません

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

表示プロパティをアニメーション化することはできません。目的のために不透明度を使用する必要があります。

$(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 を使用する場合、transition プロパティを設定する必要はありません。