0

我想开发一个菜单栏，一旦用户将鼠标光标放在选项卡上，选项卡就会向上扩展。实际上它工作得很好，尽管存在一个问题：如果用户将鼠标光标放在一个选项卡上，然后非常快速地将其移动到选项卡上方，则选项卡开始非常频繁地上下移动，看起来好像它会闪烁。

这是我如何实现它的一个例子：http: //jsfiddle.net/enne87/wLGDG/34/

当我说“将光标移到选项卡上然后向上”时，我希望您知道我的意思。如果没有，我可以给你看一个视频，它更准确地说明了我的意思。

顺便提一句。这是动画的javascript代码：

  $('#primaryMenu ul.menu li:nth-child(1)').hover(
  function () {
      $(this,this).stop(true,true).animate({bottom: '+=55'}, 300, function() {}); 
  },
  function () {
      $(this,this).stop(true,true).animate({bottom: '-=55'}, 300, function() {});
  }
);

我将非常感谢您的帮助。

干杯，恩

4

1 回答 1

0

我知道这不是固定代码，但问题是：

问题

您实际上是在为整个li节点的位置设置动画，这正在创建工件。为其他读者澄清：

  1. 转到小提琴上的实时样本并从下方接近菜单项。不要移动鼠标
  2. 向上动画将完成，但现在可以看到鼠标触发“离开”并且它会开始向下移动
  3. 向下动画将完成，但随后触发“进入”并再次开始，无限循环。

闪烁来自更极端的版本：

  1. 从菜单下方接近。动画开始向上移动
  2. 将鼠标向上移向动画项目

当您移动鼠标时，会触发向上的“停止”，将元素直接发送到动画的顶部。但随后您将再次重新输入该元素，如果它尚未位于顶部则触发动画。当元素尚未位于顶部时向上移动鼠标将触发“离开”，将元素直接发送到底部。

哇

修复

那么，修复？不是为菜单的位置设置动画，而是设计一种动画高度的方法，使其不是向下推而是向上推（使用当前的 CSS，简单地动画高度将li向下扩展灰色，而不是向上）。这将涉及修改 CSS 以适应该开关。如果设计要求整个块需要保持 200px 高（给人一种它正在移动的错觉），那么事件应该绑定到某种透明容器而不是LI.

无关的东西

与此同时，原始代码存在一些基本问题：

  1. 为什么是$(this,this)mouseenter/mouseleave 的选择器？第二个可选选择器是上下文。对两者使用相同的选择器不会创建上下文，因此您应该只使用$(this).

  2. 事件不需要绑定两次。它们都li符合相同的描述，所以你可以让你的选择器寻找：

$('#primaryMenu ul.menu li').hover( /* ... */);

li或者，如果出于某种原因指定哪些事件实际上很关键，请将它们组合在一起：

$('#primaryMenu ul.menu li:nth-child(1), #primaryMenu ul.menu li:nth-child(2)')
于 2012-04-07T17:07:24.870 回答