jQuery - 将鼠标悬停在元素上并将元素设置为该位置的动画元素

我想制作一个菜单，请执行此操作：http://jsfiddle.net/8U9fy/1/（没想要打扰他们定位所有这些......）但是，我想使它使它不依赖于菜单/链接大小..（类似于分配箭头以根据特定元素类别或某物移动）jQuery - 将鼠标悬停在元素上并将元素设置为该位置的动画元素

我正在考虑类似.. http://docs.jquery.com/UI/Position但我不知道.animate是否可以与它一起使用..

所以，要说清楚..问题确实不是根据特定元素定位箭头，而是..在动画箭头运动时这样做..

想法？

编辑：我想实现类似像什么香港专业教育学院在的jsfiddle例如做了什么..布提想这样做，以便它不事关什么尺寸的菜单或链接...

目前箭头的位置是由一个位置的左值来控制的，这意味着如果我想......可以说在链接之间添加填充，我将不得不一次又一次地调整.animate左值。

来源

2011-04-23 Joonas

你能不能改一下这个问题？目前尚不清楚。 – 2011-04-23 19:54:31

你是说当你将鼠标从一个菜单项移动到下一个时，动画是平滑的，而不是在你点击下一个元素时开始移动？ – Steve 2011-04-23 20:01:14

也许编辑更清晰 – Joonas 2011-04-23 20:02:52

这样的事情应该管用。您需要根据需要调整位置计算。

var arrow = $(".Arrow"); 
$("ul#menu").delegate('a', 'mouseenter', function() { 
    var left = $(this).offset().left - arrow.parent().offset().left + $(this).outerWidth()/2 - arrow.width()/2 
    arrow.stop().animate({left: left}, 800, 'easeOutBack'); 
});

（编辑补充kingjiv的 '左' 的计算。）

来源

2011-04-23 19:58:51 Talljoe

@Talljoe这是相当不错..但我真的很希望解决方案，不依赖于任何价值的变化 – Joonas 2011-04-23 20:14:37

和.. jquery ui position thingie似乎这样做很好，easy..except至少是知道..你不能。动画...我觉得有点难以相信.. – Joonas 2011-04-23 20:17:36

你是什么意思“不依赖于价值的变化”？无论元素的大小或元素的数量如何，该示例都可以工作。你只需要找到正确的计算来将箭头放在你想要的位置相对于元素的位置。 – Talljoe 2011-04-23 20:30:02

jQuery - 将鼠标悬停在元素上并将元素设置为该位置的动画元素

回答

相关问题