鼠标悬停 a[tag] 上的 HTML，使用 css3 平滑过渡更改 img src 属性答案

【问题标题】：HTML on mouseover a[tag], changing img src attribute with css3 smooth transition鼠标悬停 a[tag] 上的 HTML，使用 css3 平滑过渡更改 img src 属性
【发布时间】：2015-12-22 12:18:31
【问题描述】：

这是我的代码，

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 更改时间的过渡。并且onmouseout时间需要显示淡出效果。

【问题讨论】：

标签： jquery animation transition mouseover mouseout

【解决方案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);

【讨论】：