我有一个
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");
});
});
});
解决方法
您无法使用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;
}