jQueryで画像を変更する間にスムーズさを追加

Question

私は、ユーザーが米国の地図上の地図領域を転がしたときに画像を変更するこのコードを持っています。それは完璧に働いています。しかし、私はイメージが滑らかな外観を持っていて、徐々に消えることを望んでいます。このコードに何を追加する必要がありますか？ありがとう！

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

}); 

Answer 1

jQueryのfadeOut/fadeInエフェクトを使用してみてください。 おそらく、このような何か：

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

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

Answer 2

あなたがフェードインを.using効果のAPIを見ることができます（）はフェードアウト（） http://api.jquery.com/category/effects/

Answer 3

CSS transitionsを機能これを処理する別の方法です。良いチュートリアル（デモ）hereがあります。