我环顾四周找到了解决方案,但我想知道是否有办法编写更简单的代码.基本上我创建的是一个简单的淡入淡出,淡出图像的悬停效果.
$(document).on('mouseenter','.photos div',function () {
"use strict";
$(this).find('img.nocolor').stop().animate({ 'opacity': '0' },800);
});
$(document).on('mouseleave',function () {
"use strict";
$(this).find('img.nocolor').stop().animate({ 'opacity': '1' },800);
});
我知道你可以将mouseenter,mouseleave放在一起,但我不知道如何构建这样的切换功能.请让我知道如何简化这一点.
解决方法
您是否有理由想用Javacscript实现这种效果？您可以使用纯CSS完全实现您的目标：
#an-image {
opacity: 0.2;
transition: opacity 0.8s linear;
}
#an-image:hover {
opacity: 1;
transition: opacity 0.8s linear;
}
你可以在这里看到一个有效的例子：http://jsfiddle.net/oqqx1z3k/
您可以查看this example以查看它与您提供的示例相结合.
