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 transitions是处理此问题的另一种方法。有一个很好的教程（和演示）here。

Answer 3

你可以看到效果API。使用fadeIn（）fadeOut（）函数 http://api.jquery.com/category/effects/

使用jQuery在更改图像之间添加平滑度

3 个答案: