Jquery change image on rollover with fade

Question

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.

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

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

Answer 1

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"));
});

...and then follow the single-image technique from the page you linked to.