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

Posted 2023-05-08

【中文标题】jQuery - 将鼠标悬停在元素上并将元素动画到该位置

【英文标题】：jQuery - Hover over element and animate element to that position

【发布时间】：2011-08-11 14:39:59

【问题描述】：

我想制作一个菜单……这样做：http://jsfiddle.net/8U9fy/1/（不想费心把它们定位得那么好……）但是……我想使它不是菜单/链接大小依赖..（例如根据特定元素类分配箭头移动..或其他东西）

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

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

想法？

编辑：我想实现类似于我在那个 jsfiddle 示例中所做的事情。但我想这样做，以便菜单或链接的大小无关紧要......

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

【问题讨论】：

您能重新表述一下这个问题吗？不清楚。

你是说当你将鼠标从一个菜单项移动到下一个菜单项时动画是平滑的，而不是在你点击下一个元素时开始移动？

也许编辑让它更清晰

【参考方案1】：

这样的事情应该可以工作。您需要根据需要调整位置计算。

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 的“左”计算。）

【讨论】：

@Talljoe 非常好.. 但我真的希望找到不依赖任何价值变化的解决方案

and.. 那个 jquery ui position thingie 似乎做得很好而且很容易..除了据了解..你不能.动画那个...我觉得有点难以置信..

“不依赖值变化”是什么意思？无论元素的大小或您拥有的元素数量如何，该示例都将起作用。您只需要找到正确的计算方法，将箭头相对于元素的位置放置在您想要的位置。

@Talljoe 好吧.. 首先.. 当第一次将其应用于菜单时，必须进行值更改.. 我知道这没什么大不了的，但在这种情况下它很重要..另外.. 它完全依赖于具有相同大小的元素.. jsfiddle.net/8U9fy/14

@Talljoe jsfiddle.net/8U9fy/15 正如我所说.. .position 似乎做得很好.. 我只是不知道我会如何 .animate 那个...