动画“src”属性 [英] Animating "src" attribute

问题描述

我有一个HTML文档。它看起来像这样：

I have an HTML document. It looks like this:

当用户将鼠标悬停在stackinfo图像上时，我想要它如下所示：

When the user hovers "stackinfo" image, I want it look like this:

我的图片代码：

<img src="/Resources/Images/MainMenu/logo.png" name="Logo" width="100" height="30" class="MainMenu" id="Logo" />

我知道如何更改 src 悬停时的图片，但是我如何动画这个？

I know how to change the src of the image on hover, but how can I animate this?

（我想用jQuery做）

(I want to do it with jQuery)

我已经尝试了：

$(document).ready(function(){
       $('img[name="Logo"]').hover(function(event){
         $(this).fadeIn(function(event){
             $(this).attr("src","/Resources/Images/MainMenu/logoHover.png");
         });
       },
       function(event){
         $(this).fadeToggle(function(event){
             $(this).attr("src","/Resources/Images/MainMenu/logo.png");
         });  
       });
});

推荐答案

感谢您的所有回复，

这是CSS代码：

#Logo.MainMenu{
    margin-left: 0px;
    margin-right: 6px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100px;
    height: 30px;
    background: url(/Resources/Images/MainMenu/logo.png);
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

#Logo.MainMenu:hover { 
    background-image: url(/Resources/Images/MainMenu/logoHover.png); 
}

并在HTML页面上：

<div id="Logo" class="MainMenu"> &nbsp; </div>

这篇关于动画“src”属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！