4

我有一个 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");
         });  
       });
});
4

7 回答 7

4

您不能.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;
}
于 2012-11-09T19:14:13.340 回答
3 
function troca_imagem(url) {
    $('#foto_grande').animate({ opacity: 0 }, 500, function () { document.getElementById('foto_grande').src = url; });
    $('#foto_grande').animate({ opacity: 1 }, 500);
}
于 2014-03-07T12:45:02.930 回答
1

根据 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;   
}

​ ​</p>

于 2012-11-09T19:12:41.370 回答
1

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

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

于 2012-11-09T19:15:29.047 回答
1

您不能真正为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");
});

​</p>

于 2012-11-09T19:28:28.570 回答
0

JQuery 颜色插件将允许您为颜色设置动画。

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

因此，您可以拥有一个具有透明背景的 png，并为持有该 png 的容器的背景设置动画。如果您可以使用网络安全字体制作文本，那么您也可以对其进行动画处理...

或者您可以制作 SVG 图像，将 svg xml 直接嵌入到您的 html 中（可能无法在旧版本的 IE 中工作，因为它们具有糟糕的 SVG 支持而没有 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、opera、chrome 和 safari

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

于 2012-11-09T20:45:32.527 回答
0

Thank you for all your replies, but I found a method that works great!

This is the CSS code:

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

and on the HTML page:

<div id="Logo" class="MainMenu"> &nbsp; </div>
于 2012-11-09T19:32:22.383 回答