Question

我的悬停菜单工作正常，不透明效果，但现在我突然不知道他们没有显示悬停的图像。其他动画如文字的动作正在...... 我对Jquery不太了解。所以认真地坚持到这里。 You can see the website online if you need.

我也在这里粘贴代码，这样你就可以更好地看到它。跨度上的动画无效。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/blockui.js">
</script>
<script type="text/javascript" src="js/easySlider1.7.js">
</script>
<script src="js/prettyPopin.js" type="text/javascript" charset="utf-8">
</script><!-- Let's do the animation -->

<script type="text/javascript">
//<![CDATA[

    $(function() {
        // set opacity to nill on page load
        $("ul#menu span").css("opacity","0");
        // on mouse over
        $("ul#menu span").hover(function () {
            // animate opacity to full
            $(this).stop().animate({
                opacity: 1
            }, "slow");
        },
        // on mouse out
        function () {
            // animate opacity to nill
            $(this).stop().animate({
                opacity: 0
            }, "slow");
        });
    });

//]]>
</script>
<script type="text/javascript">
//<![CDATA[

    $(document).ready(function() {

        $.blockUI({ css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#FFF',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .8,
            color: '#FFFFF'
        } });

        setTimeout($.unblockUI, 1500);
    });



</script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function() {

$(".bullet li").hover(function(){
        $(this).find('span').animate({ opacity: 0 }, 300);
        $(this).find('a').animate({paddingLeft:"85px"}, 300);
        },function(){
        $(this).find('span').animate({ opacity: 1 }, 300);
        $(this).find('a').animate({paddingLeft: "70px"}, 300);
        });
            });

//]]>
</script>
<script type="text/javascript">
//<![CDATA[


    $(document).ready(function(){
    $("#slider").easySlider({
        speed:800,
        pause:3000,
        prevId: 'prevBtn',
        nextId: 'nextBtn',
        auto: true,
        continuous: true
    });
});

//]]>
</script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[

        $(document).ready(function(){
            $("a[rel^='prettyPopin']:eq(0)").prettyPopin({width: 550,followScroll:false});
                $("a[rel^='prettyPopin']:eq(1)").prettyPopin({width: 550,followScroll:false});
                    $("a[rel^='prettyPopin']:eq(2)").prettyPopin({width: 550,followScroll:false});
    });
//]]>
</script><![if !(IE 6)]>
  <link rel="stylesheet" type="text/css" href="my.css" /><![endif]><!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="myie.css" />
<![endif]-->
  <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="myie7.css" />
<![endif]-->
</head>

<body>
  <div id="wrapper">
    <div id="header">
      <div id="appoint">
        <ul>
          <li>For appointment:
          +92-55-3856686<strong>|</strong>3859676<strong>|</strong>3846888</li>
        </ul>
      </div><!--appoint div close-->

      <div id="navi">
        <ul id="menu">
          <li><a href="#" class="home"></a></li>

          <li><a href="#" class="service"></a></li>

          <li><a href="#" class="portfolio"></a></li>

          <li><a href="#" class="contact"></a></li>
        </ul>
      </div><!--navigation div close-->
    </div><!--header div close-->

这是我用于导航的CSS

    /* Menu Body */
ul#menu {
    height:39px;
    list-style:none;
    margin:0;
    padding:0;
}

/* Float LI Elements - horizontal display */
ul#menu li {
    float:left;
}

/* Link - common attributes */
ul#menu li a {
    background:url(images/menu.png) no-repeat scroll top left;
    display:block;
    height:39px;
    position:relative;
}
    /* Span (on hover) - common attributes */
ul#menu li a span {
    background:url(images/menu.png) no-repeat scroll bottom left;
    display:block;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:100;
}

/* Span (on hover) - display pointer */
ul#menu li a span:hover {
    cursor:pointer;
}


/* Specify width and background position attributes specifically for the class: "home" */
ul#menu li a.home {
    width:83px;
}
/* Shift background position on hover for the class: "home" */
ul#menu li a.home span {
    background-position:0px -39px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.service {
    width:110px;
    background-position:-83px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.service span {
    background-position:-83px -39px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portfolio {
    width:104px;
    background-position:-193px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portfolio span {
    background-position:-193px -39px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.contact {
    width:210px;
    background-position:-297px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.contact span {
    background-position:-297px -39px;
}

请尽快回复我，紧急

Answer 1

我认为你错过了<span></span>内的ul#menu li a，所以看起来就是这样：

    <ul id="menu">
      <li><a href="#" class="home"><span></span></a></li>
      <li><a href="#" class="service"><span></span></a></li>
      <li><a href="#" class="portfolio"><span></span></a></li>
      <li><a href="#" class="contact"><span></span></a></li>
    </ul>

.hover函数在菜单jquery中停止了动画

1 个答案: