HTML при наведении курсора на [тег], изменение атрибута img src с плавным переходом css3

Question

Это мой код,

HTML

<ul id="submenu">
<li data-img="submenu1.jpg"><a href="#">Experience</a></li>
<li>....</li>
<li>....</li>
</ul>

<img id="company-image" data-original="company.jpg" src="company.jpg">

JQuery

$("#submenu li").hover(function() {
            $("#company-image").attr("src", $(this).data("img"));
        }, function(){
            $("#company-image").attr("src", $("#company-image").data("original"));
        });

здесь, когда я нахожу курсор мыши на li, удаляя существующее значение img src и добавляя новое имя img (submenu1.jpg), в то время как это мне нужно показать переход от старого к новому времени смены img. и время перерыва должно показывать эффект затухания.

Answer 1

Попробуйте функцию.fadeOut() их изображения.

$("#company-image").attr("src", $(this).data("img")).fadeOut(500);

вот ссылка на w3schools http://www.w3schools.com/jquery/eff_fadeout.asp

вам также нужно будет установить setTimeout() при загрузке нового изображения

$("#submenu li").hover(function() {
        $("#company-image").attr("src", $(this).data("img").FadeOut(500));
    }, setTimeout(function(){
        $("#company-image").attr("src", $("#company-image").data("original"));
    }), 550);