使用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

CSS过渡是处理此问题的另一种方法。这里有一个很好的教程(和演示)。

Answer 3

您可以使用fadeIn() fadeOut()函数看到效果APIhttp://api.jquery.com/category/effects/