Jquery在翻转时改变图像与淡入淡出

我目前正在使用下面的脚本来更改翻转时的图像。 有许多图像需要应用此效果 – 每个图像都有自己的翻转图像。 该脚本适用于翻转，但不适用于淡入淡出。

我已经阅读了关于使用CSS和jquery来实现淡入淡出的效果： http ： //jqueryfordesigners.com/image-cross-fade-transition/

但是，为100多个不同的图像编写CSS会是一个真正的痛苦！ 我只是想知道是否有人知道我做错了什么以及如何使脚本工作？ 🙂

$(function () { $("img.rollover").hover(function () { this.src = this.src.replace("_off", "_on") }, function () { this.src = this.src.replace("_on", "_off") }) }); $("a img").hover(function () { jQuery(this).stop().fadeTo("fast", 0.5); }, function () { jQuery(this).stop().fadeTo("fast", 1); }); 

Answer 1

而不是为超过100个不同的图像编写CSS，为什么不使用jQuery .each循环为您添加CSS？

 $("img.rollover").each(function() { this.css('background-image',this.src.replace("_off", "_on")); }); 

…然后按照您链接到的页面中的单图像技术。