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

淡出设置显示为无;

试试这个：

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

如果您要阻止用户生涩的事件，您可以查看hoverIntent plugin。

Answer 2

jsFiddle

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

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

虽然通常建议用更<ul>之类的语义来制作菜单

Answer 3

试试这个，

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

）;

你可以使用'fast'或'normal'param而不是'slow'

您可以看到更多细节here。

修改

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

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

Javascript fadein淡出到jquery fadein淡出

3 个答案: