Javascript fadein淡出到jquery fadein淡出

Question

我有JavaScript代码来fadein.fadeout菜单，当任何用户悬停它。

我想转换成JavaScript fadein fadeout到jQuery fadein fadeout。

请帮我解决这个问题，我想要jQuery，因为它是以fadein fadeout的方式加载的，而不是javascript中的jurk。

<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

jsFiddle

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

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

尽管通常建议使用更具语义性的东西来制作菜单，比如<ul>的

Answer 2

淡出将显示设置为无；

试试这个：

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

如果你想防止用户的突发事件，你可以看看hoverIntent plugin。

Answer 3

尝尝这个,

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

)；

你可以用'fast‘或'normal’参数代替'slow‘

更多详细信息，您可以查看here。

编辑

如果你想在悬停div时使用手形光标，你可以尝试一下，

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