我有一个带有灰度图像的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(); });
原文地址:https://www.jb51.cc/jquery/181432.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。