CODEWITHSUNDEEP
javascriptjquery
Michael Rader
Michael Rader

Reputation: 5957

Add smoothness between changing images with jQuery

I have this code that changes the image when a user rolls over a map area on my United States map. It is working perfectly. But I want the the images to have a smooth appearance and then a gradual fade away. What do I need to add to this code? Thanks! 

$(document).ready(function() {

//set off state 
var nav_off = "/images/state-map.png";

// functions for over and off
function over(image) {
    $("#main-nav").attr("src", image);
}
function off() {
    $("#main-nav").attr("src", nav_off);
}

$("#imagemap area").hover(
    function () {
        var button = $(this).attr("id");
        over("/images/state-" + button + ".png");
    },
    function () {
        off();
    });

});

Upvotes: 1

Views: 79

Answers (3)

Bobby Jack
Bobby Jack

Reputation: 16018

CSS transitions are an alternative way of handling this. There's a good tutorial (and demo) here.

Upvotes: 1

Ryan Yiada
Ryan Yiada

Reputation: 4769

you can see the effects API .using fadeIn() fadeOut() functions http://api.jquery.com/category/effects/

Upvotes: 0

potato
potato

Reputation: 86

Try using jQuery's fadeOut/fadeIn effect. Perhaps something like this:

function over(image) {
    $("#main-nav").fadeOut(function () {
        $(this).attr("src", image).fadeIn();
    });
}

function off() {
    $("#main-nav").fadeOut(function () {
        $(this).attr("src", nav_off).fadeIn();
    });
 }

Upvotes: 5

Related Questions