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

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);

鼠标悬停在[tag]上的HTML，用css3平滑过渡改变img src属性

1 个答案: