Search code examples
jqueryjquery-uijquery-effectsbounce

jQuery bounce effect not working for links in an un-ordered list

I'm having trouble getting the bounce effect to work. animate() works as long as the anchor tag is relatively positioned. I made a jsfiddle with all of my css and html from my site available here: http://jsfiddle.net/CRzFj/

I'm looking for a result similar to http://jsfiddle.net/RGvjj/26/ but I think one of my css styles is breaking the bounce. I'm not sure which one it is though.

EDIT Actually found the answer to this shortly after posting, and playing around with the jsfiddle. I needed to add position: relative and display: block to the span tags, removing float: left.

.nav ul.primary-menu li a span {
    //float: left;
    height: 198px;
    line-height: 335px;
    text-align: center;
    width: 100px;
    // new code here
    display: block;
    position: relative;
}
Solution

  • you forgot to add span so just do this

    $("#primary-menu-bar ul.menu li a span").hover(function() {
    $(this).effect("bounce", { times: 3 }, 300);
});