jquery 弹跳效果破坏了列表的内联对齐

发布于 2024-12-19 02:47:00 字数 753 浏览 1 评论 0原文

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

<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 文件中有这样的内容：

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

我已经让每个列表项在悬停时弹回，但我遇到了问题，因为当它们悬停时，列表项对齐会像它们一样中断放在底部（我的列表项应该是内联的）。而且，每当它们悬停时，它们都会不断弹跳。

我想要发生的是，我可以限制它的弹跳效果，它只会弹跳一次，并且在鼠标从链接移开后会再次弹跳。另外，我想在弹跳时保持导航的内联显示。

这可能吗？我已经尝试了一些东西，但它不起作用。任何帮助将不胜感激。先感谢您。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不弃不离 2024-12-26 02:47:00

正如noah 1989所说，float:left是关键：

    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 上的弹跳，/a> 就是小提琴。

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.

回复收藏 0 原文