Matt 0

I have a simple script which changes the image when you hover over it, using element.src = "hover_pic.png"

Anyway, I'd like to make the change more 'smooth' by using jQuerys fade effects. Any idea how to do this?

1 answer

danwellman 5600
0
points
This was chosen as the best answer

The trick is to put each image into a container, then append the new image to the container on hover, but have it set to display:none at first, then gradually fade it in. Something like this should do it:

$("image_id").hover(function() {
    $("<img />").attr({
        src: "path_to_new_image",
        id: "new_image"
    }).appendTo("container_id").fadeIn("slow");
}, function() {
     $("new_image").remove();
});

That'd probably need a tweak but should essentially be what you need

Answered over 6 years ago by danwellman