JQuery look up ul with class name

Question

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

score 2 · Answer 1 · answered Jan 08 '13 at 08:01

2

Shouldn't your selector by ul.my_menu?

$("ul.my_menu > li")

answered Jan 08 '13 at 08:01

legendofawesomeness

2,901
2
19
32

Thanks for the reply, I am sorry because I copied the code from different backup, I am sure there is no naming mistake, thanks. – Steve Lam Jan 08 '13 at 08:20
Then what isn't working for you? Here is a working fiddle with exactly your code - http://jsfiddle.net/A3vvH/ ?? – legendofawesomeness Jan 08 '13 at 08:24

score 0 · Answer 2 · answered Jan 08 '13 at 08:04

0

I can't find a class .am_menu in your html . I think it should be replaced with ul.my_menu .

Bug :

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

Fix :

`$("ul.my_menu > li").mouseover(function(){`

answered Jan 08 '13 at 08:04

kannanrbk

6,964
13
53
94

Thanks for the reply, I am sorry because I copied the code from different backup, I am sure there is no naming mistake, thanks. – Steve Lam Jan 08 '13 at 08:21

JQuery look up ul with class name

2 Answers2