jQuery-闪烁的菜单栏

时间:2012-04-07 16:27:15

标签: jquery

我想开发一个菜单栏,只要用户将鼠标光标放在标签上,标签就会向上扩展。实际上它工作得很好,尽管存在一个问题:如果用户将鼠标光标放在一个标签上然后将其快速移动到标签上方,标签会开始上下移动非常快且看起来就好像它会闪烁。

以下是我如何实施它的示例: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() {});
  }
);

我非常感谢你的帮助。

干杯,恩内

1 个答案:

答案 0 :(得分:0)

我知道这不是固定代码,但问题在于:

问题

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

  1. 转到小提琴上的实时样本并从下方接近菜单项。不要移动鼠标
  2. 动画完成将完成,但现在看到鼠标触发'离开'并且它将开始向后移动
  3. 动画缩小将完成,但随后会触发“输入”,并以无限循环再次开始。
  4. 闪烁来自更极端的版本:

    1. 从菜单下方接近。动画开始向上移动
    2. 将鼠标向上移动到动画项目
    3. 当您移动鼠标时,会触发向上的“停止”,将元素直接发送到动画的顶部。但是然后你将再次重新输入元素,如果动画尚未位于顶部,则触发动画。当元素尚未位于顶部时向上移动鼠标将触发“离开”,将元素直接发送到底部。

      修复

      那么,修复?而不是设置菜单位置的动画,设计一种方法来设置高度的动画,使其不向下推,而是向上推(使用当前的CSS,简单地设置动画高度会向下扩展灰色li,而不是向上扩展)。这将涉及修改CSS以适应该开关。如果设计要求整个块需要保持200px高(为了给出 移动)的错觉,那么事件应绑定到某种透明容器而不是{{1} }。

      无关的东西

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

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

      2. 事件不需要绑定两次。它们都是符合相同描述的$(this),因此您可以让您的选择器查找:

      3. li

        或者,如果由于某种原因确定哪个$('#primaryMenu ul.menu li').hover( /* ... */); 具有该事件实际上是关键的,请将它们组合在一起:

        li