jquery div淡入/淡出 - 鼠标移出后保持动画

Question

我在菜单上执行的一些 jquery 有两个问题。

我有两个块：

-------------------
| block1 | block2 |
-------------------

块 2 最初是隐藏的。

当用户将鼠标悬停在块 1 上时，块 2 淡入，然后当用户将鼠标移出块 1 时淡出。

我有两个问题：

1) 如果用户将鼠标快速移至/移出/移出/移出/等，则块 2 会继续淡入/移出/移入/移出/等几秒钟，即使用户的鼠标不在块 1 上。

2) 如果用户将鼠标悬停在块 1 上，然后将鼠标移动到块 2，块 2 会淡出 - 我需要块 2 保持可见。

我的 jquery 代码是：

$('#block1').hover(
function(){$('#block2').fadeIn()},
function(){$('#block2').fadeOut()}
);

我已经在页面上使用 jquery 来实现其他效果，所以我想使用 jquery 而不是 css 来做这个块 2 淡入淡出。

谢谢

Answer 1

1) 如果用户将鼠标快速移到/移出/移出/移出/等，则块 2 会继续淡入/移出/移入/移出/等几秒钟，即使用户的鼠标不在块 1 上。

您需要取消 mouseOut 上的动画。您可以使用 stop 方法来执行此操作。 http://api.jquery.com/stop/

2) 如果用户将鼠标悬停在块 1 上，然后将鼠标移动到块 2，块 2 会淡出 - 我需要块 2 保持可见。

向块 2 添加一个悬停事件，该事件添加一个 css 类以使块 2 始终可见。这应该在鼠标移出时删除。

Answer 2

$('#block1').hover(
    function(){$('#block2').stop().fadeIn()},
    function(){$('#block2').stop().fadeOut()}
);