Question

我正在尝试创建一个简单的菜单，其中悬停在不同元素上的菜单上的不同图像会逐渐消失。我最好的客人是创建一个jQuery，但它似乎不起作用。这是脚本：

$(document).ready(function() {
    $("#pau").mouseover(function(){
        $("#paup").show.fadeIn(600);
    $("#pau").mouseout(function(){
        $("#paup").fadeOut(600);
    });
});

#pau div仅定义文本部分，图像应该在其中淡入。当我将鼠标悬停在#pau上时，这里是我想要显示的图像的div：

#paup{
    position:absolute;
    display:none;
    left:0;
    right:0;
    margin-top:90px;
    width:100%;
}

HTML：

<!--This is a script to change opacity of img.-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js">     </script>
<script>
    $(document).ready(function() {
    $("#pau").mouseover(function(){
                $("#paup").fadeIn(600);
    $("#pau").mouseout(function(){
                        $("#paup").fadeOut(600);
                    });
                         });
</script>
</head>
<body>
<div class='box'>
<div id="paup"><img src="./images/paulinemma.jpg"/></div>
<div class='logo'>#najforever</div>
<div class='people'>
    <table style="width:100%" height="70px">
        <tr>
            <td>
                <div id="pau">
                <ul>
                    <li>redpoppy stories</li>
                        <ul class="sub-menu">
                            <li><a href="#">Facebook</a></li>
                            <li><a href="#">Instagram</a></li>
                            <li><a href="#">Vimeo</a></li>
                        </ul>   
                </ul>
                </div>
            </td>
       .....

你能告诉我为什么我的剧本不起作用吗？感谢

Answer 1

更改

$("#paup").show.fadeIn(600);

到

$("#paup").fadeIn(600);

更新：请使用

更改document.ready中的代码

$(document).ready(function() {

    $("#pau").mouseover(function(){
        $("#paup").fadeIn(600);
    });

    $("#pau").mouseout(function(){
        $("#paup").fadeOut(600);
    });

});

你没有在fadeIn

中完成callabck功能

Answer 2

好像你有一些语法错误：

$(document).ready(function() {

$("#pau").mouseover(function(){
    $("#paup").fadeIn(600);
});

$("#pau").mouseout(function(){
    $("#paup").fadeOut(600);
});

});

工作演示：http://jsfiddle.net/hro1e6kn/

链接悬停上的jQuery fadein图像

2 个答案: