我有一个带有灰度图像的img标签.我连接了一个Hover()事件,以便在悬停时将“src”更改为彩色图像,并在鼠标输出时将其更改为灰度.
这很好,但变化是突然的.我想在效果上添加一个轻微的淡入淡出(),使颜色看起来像淡化和渐弱.我写了以下我认为可行的,但没有. (图像会发生变化,但效果不会消退或延迟).我究竟做错了什么？
$("#showForm").hover(
function () {
$(this).fadeIn('slow',function(){
$(this).attr("src",'images/AddButtonSmall.gif');
});
},function () {
$(this).fadeIn('slow','images/AddButtonSmallGray.gif');
});
}
);
解决方法
这里有几个解决方案.您的代码不起作用,因为您正在设置立即更改图像的源.只是加载两个图像,用CSS覆盖它们然后在父容器被鼠标悬停时淡出一个颜色可能更容易.或者你也可以淡化它们
CSS
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}
HTML
<div class="fader">
<img src="http://placehold.it/300x300/000fff" />
<img src="http://placehold.it/300x300/fff000" />
</div>
在鼠标悬停时淡入
$('.fader').hover(function() {
$(this).find("img:last").fadeToggle();
});
交叉淡入淡出
$('.fader').hover(function() {
$(this).find("img").fadeToggle();
});
