Question

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

original

当用户悬停“stackinfo”图像时，我希望它看起来像这样：

hovered

我的图片代码：

<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

您不能直接使用jQuery为.src值设置动画。

您需要使用两个图像，这两个图像位于另一个之上，因此可以将一个图像淡入另一个图像的顶部。

两张图片都应预先加载或预先处理，以便在设置.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

根据OP制作的编辑编辑我的答案。下面使用css sprite并使用css3设置不透明度的动画。请注意，这不适用于任何IE9＆lt;。

<强> Live Demo

<强> More in depth explanation

.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 4

您可以将不透明度设置为零，使用回调更改图像源并绑定事件处理程序，以便在图像加载时动画显示不透明度。

$('.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 5

您无法为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 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，并为持有png的容器的背景设置动画。如果您可以使用网络安全字体来处理文本，那么您也可以设置动画...

或者你可以制作你的SVG图像，将svg xml直接嵌入到你的html中（可能不适用于旧版本的IE，因为它们有s / s插件的SVG支持很糟糕）

使用jquery.color.js我们只需添加一个钩子来允许svg fill属性，然后创建一个悬停函数，如：

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，opera，chrome和safari

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

动画“src”属性

7 个答案: