jQuery的反弹效果打破了列表的内联对齐 [英] jquery bounce effect breaks inline alignment of list

问题描述

我正在尝试通过网站的主导航制作一些动画.有了这个，我想在悬停导航菜单项时应用跳动效果.这是我的导航结构:

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>

然后我的script.js文件中有这个文件:

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.

推荐答案

正如1989年诺亚所说，float:left是关键:

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

    li {
        float:left;
    }

这是我使用的js:

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

这里是小提琴，如果您想查看hoverIn和hoverOut的弹跳.

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

这篇关于jQuery的反弹效果打破了列表的内联对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！