Jquery在滚动时更改图像并带有淡入淡出答案

【问题标题】：Jquery change image on rollover with fadeJquery在滚动时更改图像并带有淡入淡出
【发布时间】：2011-12-18 18:00:36
【问题描述】：

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

我已经阅读了关于使用 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);
});

【问题讨论】：

对于它的价值，它对我来说看起来不错。
如果您还可以提供 HTML 样本（如果要替换和淡化图像，至少提供两个）会有所帮助。
也许在替换 src 悬停事件之前发生了淡入淡出悬停事件？为什么要使用 2 个不同的 CSS 选择器？也许尝试使用相同的选择器（例如“img.rollover”）来分配两个事件？或者你可以在同一个悬停事件定义中做所有事情吗？

标签： jquery image fade rollover

【解决方案1】：

与其为 100 多个不同的图像编写 CSS，不如使用 jQuery .each 循环为您添加 CSS？

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

...然后按照the page you linked to 的单图技术。

【讨论】：