jquery bounce effect breaks inline alignment of li

问题:

I am trying to make some animations with the main navigation of my site. With this, I would want to apply a bouncing effect as the navigation menu item is hovered. This is the structure of my navigation:

<div>
    <ul>
        <li><a>Home</a></li>
        <li><a>About</a></li>
        <li><a>Testimonials</a></li>
        <li><a>Contact Us</a></li>
   </ul>
</div>

Then I have this on my script.js file:

$('nav ul li a').hover(function() { //mouse in
    $(this).parent().effect("bounce", { times:3 }, 'normal')
});

I already have each list item bounced when they get hovered but I'm having problems because as they are hovered, the list items alignment break like they would get dropped at the bottom(my list items are supposed to be inline). Also they continuously bounce whenever they are being hovered.

What I wanted to happen is that I could limit it's bouncing effect that it would only do the bouncing once and would just bounce again after mouseout from the link. Also, I wanted to maintain the inline display of my navigation when bouncing.

Is this possible? I have tried some stuff but it's not working. Any help would be appreciated. Thank you in advance.

回答1:

As noah 1989 said, float:left is the key:

    li {
        float:left;
    }

Here is the js I used:

    $('li a').hover(function() { //mouse in
        $(this).parent().effect("bounce", { times:1 }, 'normal');
    }, function () { //mouse out
        $(this).parent().effect("bounce", { times:1 }, 'normal');
    });

Here is the fiddle if you want to see the bouncing on hoverIn and hoverOut.

回答2:

Argh.. right after offering a bounty, I found the answer to this question that provides the proper solution:

Use float:left instead of display:inline.