Question

我的页面是HERE。

两个问题。 1.当我执行mouseover和mouseout时，它会多次进行动画制作。（与mouseover（）和mouseout（）相同）。我该如何立即进行动画。当我鼠标悬停时会出现，当我鼠标输出时它将消失，不再重复。此外，这有点滞后似乎很好。我尝试了setTimeout但失败了。它成功地出现了很晚但仍然重复。

2.如何在中心制作三角形div“箭头”。它位于我的笔记本电脑的中心位置。但它不适合其他屏幕尺寸。如何修改它以适应各种屏幕。

非常感谢！

Answer 1

我建议使用stop()：

$('.dynamicmenu').hover(
    function(){
        $('#ffloatmenu').stop().animate(
            {top: 0},
            {duration: 1000});
    },
    function(){
        $('#ffloatmenu').stop().animate(
            {top: -120},
            {duration: 1000});
    });

Updated JS Fiddle demo

您的原始代码似乎存在缺陷，因为mouseleave函数位于第一个mouseenter函数内部;这可能是它表现得有点奇怪的原因。而且为什么使用stop()，而不改变任何其他东西（我第一次尝试解决方案），却没有用。

参考文献：

stop()。
hover()。

Answer 2

1 - 使用hoverIntent（http://cherne.net/brian/resources/jquery.hoverIntent.html）针对您的悬停问题。

Answer 3

对于你的问题的第一部分，它正在弹跳＆amp;因为你反复触发动画。

您将悬停绑定到名为dynamicmenu的类，并且您已将该类应用于箭头和粉红色div。

将鼠标悬停在箭头上会触发鼠标输入动画，但箭头会从鼠标移开，从而触发鼠标离开动画。然后，粉红色的floatmenu div在鼠标下滑动，同时触发鼠标输入动画。在不移动鼠标的情况下，动画会继续排队并无休止地重复。当你移开鼠标时，动画队列最终会自行清空。

Answer 4

在这里，好又轻松

DEMO

箭头居中：好吧，箭头在左边：50％，但它的宽度实际上是60px！：30px border * 2.所以我们必须定位它margin-left -30px。 完成！

jQuery：dest元素处理程序是一个包含#ffloatmenu类的ID元素（在本例中为.dynamicmenu！）。这样做我们可以防止在同一个类上调用同样的动作但是在另一个元素上！而我们也必须将任何动画出列！ 完成！

`

$("#ffloatmenu").hover(function(){ $("#ffloatmenu").animate({top:'0px'},{queue:false, duration:1000}); },function(){ $("#ffloatmenu").animate({top:'-120px'},{queue:false, duration:1000}); })

`

jquery悬停问题

4 个答案:

DEMO