Javascript 使用悬停显示/隐藏jquery函数进行平滑过渡？

我正在使用一个图像地图，当图像的某些部分被悬停时，它会显示div…（就像在这个网站上）我希望div以平滑的过渡显示。。。这是我的js代码

var mapObject = {
    hover : function(area, event) {
        var id = area.attr('name');
        if (event.type == 'mouseover') {
            $('.' + id).show();
            $('#'+ id).siblings().each(function() {
                if ($(this).is(':visible')) {
                    $(this).hide();
                }
            });
            $('#'+ id).show();
        } else {
            $('.' + id).hide();
            $('#'+ id).hide();
            $('#room-0').show();
        }
    }
};
$(function() {

    $('area').live('mouseover mouseout', function(event) {
        mapObject.hover($(this), event);
    });

});

有人能给我建议一下平稳过渡的变化吗。。。

---

提前感谢！：）

首先，一个不相关的技巧-稍微更新jQuery是个好主意（如果没有任何东西依赖于您使用的旧版本）

live

将不可用，您需要将其替换为上的

，否则这是个好主意

第二，听起来你想要的就是给
隐藏
和
显示
一些转换。您只需将它们替换为
fadeIn（）
和
fadeOut（）
。您还可以使用
切换
，一次完成所有操作（尽管与悬停一起使用时可能会出现错误，因为它会疯狂地翻转）

下面是一个小片段，向您展示了它们是如何工作的：
$（文档）.ready（函数（）{
变量img=$（'img'）；
$（'#show'）。在（'单击'，函数（）上）{
img.fadeIn（）；
});
$（'#hide'）。在（'单击'，函数（）上）{
img.fadeOut（）；
});
$（'#toggle'）。打开（'click'，function（）{
img.fadeToggle（）；
});
});
*{font-family:sans-serif；}

向我展示！
把我藏起来！
切换我！




首先，一个不相关的技巧-稍微更新一下jQuery是个好主意（如果没有任何东西取决于您使用的旧版本）
live
将不可用，您需要将其替换为
上的
，否则这是个好主意

第二，听起来你想要的就是给
隐藏
和
显示
一些转换。您只需将它们替换为
fadeIn（）
和
fadeOut（）
。您还可以使用
切换
，一次完成所有操作（尽管与悬停一起使用时可能会出现错误，因为它会疯狂地翻转）

下面是一个小片段，向您展示了它们是如何工作的：
$（文档）.ready（函数（）{
变量img=$（'img'）；
$（'#show'）。在（'单击'，函数（）上）{
img.fadeIn（）；
});
$（'#hide'）。在（'单击'，函数（）上）{
img.fadeOut（）；
});
$（'#toggle'）。打开（'click'，function（）{
img.fadeToggle（）；
});
});
*{font-family:sans-serif；}

向我展示！
把我藏起来！
切换我！




正如yuvi所说，“live”功能已被弃用

我不知道为什么在对象中有悬停功能，但也可以使用fadeTo这样做：
var映射对象={
悬停：功能（区域、事件）{
var id=area.attr（'name'）；
如果（event.type=='mouseover'）{
$（'#'+id）.fadeTo（1000,1.0）；
}否则{
$（'#'+id）.fadeTo（1000,0）；
}
}
};
$（函数（）{
$（'.area'）.bind（'mouseover mouseout'，函数（事件）{
hover（$（this），事件）；
});
});

图像站在一个
图像分成两部分
与yuvi所说的一样，“live”功能已被弃用

我不知道为什么在对象中有悬停功能，但也可以使用fadeTo这样做：
var映射对象={
悬停：功能（区域、事件）{
var id=area.attr（'name'）；
如果（event.type=='mouseover'）{
$（'#'+id）.fadeTo（1000,1.0）；
}否则{
$（'#'+id）.fadeTo（1000,0）；
}
}
};
$（函数（）{
$（'.area'）.bind（'mouseover mouseout'，函数（事件）{
hover（$（this），事件）；
});
});

图像站在一个
两个图像支架
函数平滑（）{
如果（$（“#显示”）。是（“：可见”））{
$（“show”）.hide（“1000”）；
}
否则{
美元(show).show(1000);；
}
}




显示
函数平滑（）{
如果（$（“#显示”）。是（“：可见”））{
$（“show”）.hide（“1000”）；
}
否则{
美元(show).show(1000);；
}
}




显示
live
非常过时。您正在使用哪个版本的jQuery？@yuvi jQuery-1.6.4.min.js给您的
show（）
和
hide（）
一个过渡持续时间，如
show（500）
@AminJafari我希望在用户光标位于该区域时显示它！节目（500）将在500毫秒后消失。对不起，我误解了<代码>实时
非常过时。您正在使用哪个版本的jQuery？@yuvi jQuery-1.6.4.min.js给您的
show（）
和
hide（）
一个过渡持续时间，如
show（500）
@AminJafari我希望在用户光标位于该区域时显示它！节目（500）将在500毫秒后消失。对不起，我误解了！当我将show（）更改为.fadein（）并将hide更改为fadeout（）时。它根本没有反应。你能修改我的代码吗。@新手打开chrome开发工具，看看控制台。你看到有错误吗？@newbie上面的链接仍然在使用
show
和
hide
。如果要对更改设置动画，请添加
.animate
或使用快捷方式之一
淡入淡出
功能。哪一部分对你不起作用？@newbie阅读了
.animate
，以及当我将show（）改为.fadein（）并将hide改为fadeout（）时，可以使用哪些动画函数来实现类似的效果。它根本没有反应。你能修改我的代码吗。@新手打开chrome开发工具，看看控制台。你看到有错误吗？@newbie上面的链接仍然在使用
show
和
hide
。如果要对更改设置动画，请添加
.animate
或使用快捷方式之一
淡入淡出
功能。哪一部分对你不起作用？@newbie阅读有关
.animate
的内容，以及可以使用哪些动画功能来实现类似的功能