动画“src”属性(Animating “src” attribute)

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

当用户将鼠标悬停“stackinfo”的形象，我想它是这样的：

我对图像的代码：

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

我知道如何改变src上悬停的形象，但我怎么能动画呢？

（我想用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");
         });  
       });
});

Answer 1:

你不能动画.src与jQuery的直接价值。

您将需要使用两个图像，定位在彼此这样一个可以消退在其他的顶部之上。

两个图像应被预加载或预缓存所以没有延迟的图像以设定后加载.src 。

工作示例： http://jsfiddle.net/jfriend00/n52Fr/

$(".container").hover(function() {
    $(this).find(".fadeTop").fadeOut(1000);
}, function() {
    $(this).find(".fadeTop").fadeIn(1000);
});​


<div class="container">
    <img src="http://photos.smugmug.com/photos/344291068_HdnTo-Th.jpg">
    <img class="fadeTop" src="http://photos.smugmug.com/photos/344290962_h6JjS-Th.jpg">
</div>​ 


.container {
    position: relative;
    height: 100px;
    width: 150px;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2:

function troca_imagem(url) {
    $('#foto_grande').animate({ opacity: 0 }, 500, function () { document.getElementById('foto_grande').src = url; });
    $('#foto_grande').animate({ opacity: 1 }, 500);
}

Answer 3:

你不能真正动画src属性，但

如果你的目标是从一个图像淡出到另一个，将它们放置在彼此上方和动画顶个的不透明度：

http://jsfiddle.net/RPYGv/1/

HTML：

<div class="wrapper">
  <img src="...">
  <img src="..." class="on-hover">
</div>​

CSS：

.wrapper {
  position: relative;
}
.wrapper img{
  position: absolute;
  top:0; left:0;
}
.on-hover{
  opacity: 0;
}​

JS：

$(".wrapper").hover(function(){
  $(".on-hover", this).animate({opacity:1},"slow");
},function(){
  $(".on-hover", this).animate({opacity:0},"slow");
});

Answer 4:

编辑基于关闭OP所做的编辑我的答案。 下面使用CSS Sprite和动画使用CSS3不透明度。 请注意，这不会以任何IE9工作<。

现场演示

更深入的解释

.sprite{
    width:100px;
    height:100px;
    background:url(http://www.somethinghitme.com/Post%20Images/sprite.png);
    display:inline-block;
    position:relative;
}
.sprite span{
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background:url(http://www.somethinghitme.com/Post%20Images/sprite.png);
    background-position: left -100px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;   
}

.sprite:hover span{
 opacity: 1;   
}

Answer 5:

您可以在不透明度动画为零，使用回调来改变图像源以及绑定的事件处理程序时动画的不透明度背面的图像加载。

$('.sprite').on("mouseover",function(e){
    $(this).animate({
        opacity: 0
    },1000, function(){
        setTimeout(function(){
            $('.sprite').animate({
                opacity: 1
            },1000);
        },50);
        $('.sprite').css("background","url(someurl)");
    });
})

见这个例子： http://jsfiddle.net/nHC9U/

Answer 6:

感谢您对所有您的答复，但我发现的伟大工程的方法！

这是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>

Answer 7:

jQuery的颜色插件可以让你制作动画的颜色。

https://github.com/jquery/jquery-color

所以，你可以有透明背景的PNG和动画粉盒保持巴新的背景。 如果你能在网页安全字体做你的文字，那么你可以设置动画太...

或者你可以让你的SVG图像，直接嵌入SVG XML到HTML（可能不会在旧版本的IE浏览器的工作，因为他们有可怕的SVG支持W / O SVG插件）

使用jquery.color.js我们只需添加一个钩子，让SVG填写属性，然后进行悬停功能，如：

jQuery.Color.hook('fill');

var animationSpeed = 200;

$('#svgwrapper svg').hover(    
    function(){    
        $(this).animate({backgroundColor:'#000000'}, animationSpeed)
        .find('path').animate({fill:'#ffffff'}, animationSpeed);
    },                         
    function(){
         $(this).animate({backgroundColor:'#ffffff'}, animationSpeed)
        .find('path').animate({fill:'#000000'}, animationSpeed);
    }
);

下面是SVG方法的工作小提琴。 在IE9工程和Firefox，歌剧，Chrome和Safari的当前版本

http://jsfiddle.net/webchemist/hBHBn/11/

文章来源: Animating “src” attribute