小贝子编程

HTML上鼠标移到一个[标签]，改变img src属性与css3平滑过渡



这是我的代码，

<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时间需要显示淡出效果

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

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium