使用jQuery的动画菜单需要帮助

Question

I am designing a website for learning purposes and for some reason my navigation bar is sticking in the "hover" state for all tabs. 我正在设计一个出于学习目的的网站，由于某种原因，我的导航栏对于所有选项卡都处于“悬停”状态。 The tutorial I am following is pretty in-depth but I have been over the code for a number of hours and i guess i just don't have enough knowledge to figure out the problem. 我正在遵循的教程非常深入，但是我已经花了几个小时研究代码，我想我只是没有足够的知识来解决问题。 While trouble shooting, I looked at the source code and copied it (from their example) and still have the same problem. 在排除故障时，我查看了源代码并将其复制（从他们的示例中复制），仍然遇到相同的问题。 Buttons are all 'always' in hove state, and therefore Java Script does not appear to do anything. 按钮始终处于“保持”状态，因此Java Script似乎没有任何作用。

Tutorial: http://www.shopdev.co.uk/blog/animated-menus-using-jquery/ 教程： http ： //www.shopdev.co.uk/blog/animated-menus-using-jquery/

There are 3 images I have created for this (slightly different than the tutorial) 我为此创建了3张图像（与本教程略有不同）

bkrd.png = a narrow image 400 px tall that repeats the background toolbar (no menu tabs) spritedown.png = sprite that shows normal button states (home & portfolio) 81 px tall bkrd.png =高度为400 px的狭窄图像，可重复执行背景工具栏（无菜单选项卡） spritedown.png =显示正常按钮状态（主页和文件夹）的高度81 px
spriteover.png = sprite that shows button hover states. spriteover.png =显示按钮悬停状态的精灵。 81 px tall 高81像素

my code: 我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Animated Menu Demo</title>

<style>
body {
    background-color:#333333;
    margin:0;
}



/* Menu Body */
ul#menu {
    width:80%;
    height:400px;
    background:url(bkrd.png) repeat-x;
    list-style:none;
    margin:0;
    padding:0;
    padding-top:109px; /* distance from top where i need the sprite to start*/
    padding-left:20%;
}

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

/* Link - common attributes */
ul#menu li a {
    background:url(spritedown.png) no-repeat scroll top left;
    display:block;
    height:81px;
    position:relative;
}

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

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

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

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

/* Shift background position on hover for the class: "home" */
ul#menu li a.home span {
width:159px;
    background-position:0px 0px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portfolio span {
    background-position:-159px 0px;
}
</style>

the script: 剧本：

<!-- Include jQuery Library -->
<script src="jquery-1.2.2.pack.js" type="text/javascript"></script>

<!-- Let's do the animation -->
<script type="text/javascript">
$(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>
</head>

the body: 身体：

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

</html>

Answer 1

You havent turn on your jquery script the jsfiddle... Do you even have included your jquery.js in your head ? 你还没有打开你的jQuery脚本的jsfiddle ...你甚至还包括在你对你的jquery.js head ？ your jsfiddle with jquery on http://jsfiddle.net/7JxMF/1/ 您在http://jsfiddle.net/7JxMF/1/上使用jQuery的jsfiddle

使用jQuery的动画菜单需要帮助

问题描述

1 个解决方案

解决方案1
0 2013-01-19 00:42:54

使用jQuery的动画菜单需要帮助

问题描述

1 个解决方案

解决方案1 0 2013-01-19 00:42:54

解决方案1
0 2013-01-19 00:42:54