我想开发一个菜单栏,只要用户将鼠标光标放在标签上,标签就会向上扩展。实际上它工作得很好,尽管存在一个问题:如果用户将鼠标光标放在一个标签上然后将其快速移动到标签上方,标签会开始上下移动非常快且看起来就好像它会闪烁。
以下是我如何实施它的示例: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() {});
}
);
我非常感谢你的帮助。
干杯,恩内
答案 0 :(得分:0)
我知道这不是固定代码,但问题在于:
实际上,您实际上是动画整个li
节点的位置,该节点正在创建工件。为其他读者澄清:
闪烁来自更极端的版本:
当您移动鼠标时,会触发向上的“停止”,将元素直接发送到动画的顶部。但是然后你将再次重新输入元素,如果动画尚未位于顶部,则触发动画。当元素尚未位于顶部时向上移动鼠标将触发“离开”,将元素直接发送到底部。
呼
那么,修复?而不是设置菜单位置的动画,设计一种方法来设置高度的动画,使其不向下推,而是向上推(使用当前的CSS,简单地设置动画高度会向下扩展灰色li
,而不是向上扩展)。这将涉及修改CSS以适应该开关。如果设计要求整个块需要保持200px高(为了给出 移动)的错觉,那么事件应绑定到某种透明容器而不是{{1} }。
与此同时,原始代码存在一些基本问题:
为什么mouseenter / mouseleave的选择器LI
?第二个可选选择器是上下文。对两者使用相同的选择器不会创建上下文,因此您应该只使用$(this,this)
。
事件不需要绑定两次。它们都是符合相同描述的$(this)
,因此您可以让您的选择器查找:
li
或者,如果由于某种原因确定哪个$('#primaryMenu ul.menu li').hover( /* ... */);
具有该事件实际上是关键的,请将它们组合在一起:
li