jquery - Javascript淡入淡出到jquery淡入淡出

Question

当用户悬停菜单时，我有 JavaScript 代码来淡入淡出菜单。

我想将 JavaScript 淡入淡出转换为 jQuery 淡入淡出。

请帮我解决这个问题，我想要 jQuery，因为它以淡入淡出样式加载，而不是在 javascript 中加载

<style type="text/css">
     #div1 {  
         visibility: hidden;  
     }
</style>

<div onMouseOver="show('div1')" onMouseOut="hide('div1')">
    <div id="div1">
    </div>
</div>

<script>
    function show(id) {
        document.getElementById(id).style.visibility = "visible";
    }
    function hide(id) {
        document.getElementById(id).style.visibility = "hidden";
    }
</script>

Answer 1

淡出设置显示为无；

试试这个：

$("#div1").hover(
    function() {$(this).animate({opacity:1})}, // fade in
    function() {$(this).animate({opacity:1})}  // fade out
);

如果您要防止用户的生涩事件，您可能会查看hoverIntent 插件。

Answer 2

jsFiddle

<div id="outer">
    <div id="inner">Test</div>
</div>​

$("#outer").hover(function() {
    $('#inner').fadeIn();
}, function() {
    $('#inner').fadeOut();
});​

虽然通常建议用更语义化的东西来制作菜单，比如<ul>s

Answer 3

试试这个，

$("#div1").hover(
function() {$(this).show('slow')},
function() {$(this).hide('slow')}

);

您可以使用 'fast' 或 'normal' 参数而不是 'slow'

更多细节你可以在这里看到。

编辑

如果你想在悬停 div 时使用手形光标，你可以试试这个，

<style>#div1{cursor: pointer}</style>