CSS3 Анимация работает, но нет sucess с jQuery

Question

Привет, я пытаюсь увязать надпись над изображением. Я успешно сделал это с помощью CSS3. Но это не медленно исчезает, поэтому я подумал об использовании функции jQuery .animate. Но это не работает на всех

А вот

jQuery Demo

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 вам не нужно настроить свойство перехода.