Jquery在翻转时改变图像与淡入淡出 [英] Jquery change image on rollover with fade

问题描述

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

I'm currently using the script below to change an image on rollover. There are many images that this effect needs to be applied to - each image has its own rollover image. The script works for the rollover, but not for the fade.

我读过有关使用CSS和jquery来实现淡入淡出的效果： http://jqueryfordesigners.com/image-cross-fade-transition/

I've read about using CSS and jquery for the fade effect: http://jqueryfordesigners.com/image-cross-fade-transition/

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

But it would be a real pain having to write the CSS for over 100 different images! I was just wondering if anyone knows what I'm doing wrong and how to make the script work? :)

$(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);
});

推荐答案

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

Instead of writing the CSS for over 100 different images, why not use a jQuery .each loop to add the CSS for you?

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

...然后按照您链接的页面。

这篇关于Jquery在翻转时改变图像与淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！