0

I would like to add some animations on my menu bar, the code is as follows

html

<ul class="my_menu">
    <li class="home">
        <p><a href="#">Home</a></p>
        <p class="subtext">The front page</p>
    </li>
    <li class="about">
        <p><a href="#">About</a></p>
        <p class="subtext">More info</p>
    </li>
</ul>

Javascript

easing: http://buildinternet.com/live/smoothmenu/js/jquery.easing.1.3.js

Script:

$(document).ready(function(){
    $("ul.my_menu> li").mouseover(function(){
        alert('hi');
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'});
    });

    $("ul.my_menu > li").mouseout(function(){
        alert('bye');
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'});
    }); 
});

Finally, the "hi" and "bye" cannot be displayed. Is there a problem in my code? Thanks in advance.

Edited: changed am_menu -> my_menu

4

2 回答 2

2

你的选择器不应该是 ul.my_menu 吗？

$("ul.my_menu > li")
于 2013-01-08T08:01:14.303 回答
0

.am_menu我在您的 html 中找不到课程。我觉得应该换成ul.my_menu.

漏洞 ：

`$("ul.am_menu > li").mouseover(function(){`  //No class .

使固定 ：

`$("ul.my_menu > li").mouseover(function(){`
于 2013-01-08T08:04:30.703 回答