Question

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

我已经阅读了有关使用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

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

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

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

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

1 个答案: