jQuery 动画重复故障

发布于 2024-09-19 04:17:16 字数 515 浏览 15 评论 0原文

我有一组输入，我想在悬停后更改它们的背景颜色，然后在鼠标移开后返回到原始颜色。

它工作正常，有一个小故障。当我将鼠标悬停在这些输入上、取消悬停并再次快速悬停时，它们会在一段时间后闪烁。我该如何修复它？

这是我的代码：（

    $("input").hover(
    function(){
        $(this).animate({backgroundColor: '#fff'}, 800);
},  function(){
        $(this).animate({backgroundColor: '#666'}, 1400);
    });

我不想更改动画时间）

我找到了一个工作示例：

http:// veerle.duoh.com/ - 检查搜索输入 - 当您悬停然后快速关闭鼠标时 - 它不会完成动画，甚至不会眨眼。

原文

I have a set of inputs and I want to change their background color after hovering and then come back to the original color after mouse out.

It works fine, with one glitch. When I hover over those inputs, un-hover, and hover again, rapidly, they blink some time after. How can I fix it?

Here's my code:

    $("input").hover(
    function(){
        $(this).animate({backgroundColor: '#fff'}, 800);
},  function(){
        $(this).animate({backgroundColor: '#666'}, 1400);
    });

(I don't want to change animate times)

I've found a working example:

http://veerle.duoh.com/ - check SEARCH input - when you hover and then take mouse very fast off - it doesn't finish animation or even blink.

分享到QQ

分享到微博

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

发布评论

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

妄断弥空 2024-09-26 04:17:30

这是一个关于阻止 jQuery 动画构建的快速教程。我曾多次使用过这种技术。

http://www.learningjquery.com/2009/ 01/快速提示防止动画队列构建

回复收藏 0 原文

悲歌长辞 2024-09-26 04:17:26

嘿，您必须使用 stop() 函数来停止当前动画，否则 jquery 将在开始新动画之前完成动画堆栈（队列中的所有其他动画）...请参阅 jQuery queue() function 文档以了解 jQuery FX 的工作原理...

    $("input").hover(
    function(){
        $(this).stop().animate({backgroundColor: '#fff'}, 800);
    },  function(){
        $(this).stop().animate({backgroundColor: '#666'}, 1400);
    });

请参阅 jQuery stop() 函数文档。

Hey, you must use stop() function to stop current animation, otherwise jquery will complete the animation stack (all other animations in queue) before starting your new... See jQuery queue() function docs to understand how jQuery FX works...

    $("input").hover(
    function(){
        $(this).stop().animate({backgroundColor: '#fff'}, 800);
    },  function(){
        $(this).stop().animate({backgroundColor: '#666'}, 1400);
    });

See jQuery stop() function docs.

回复收藏 0 原文

~没有更多了~