多次设置偏移属性会导致元素跳转到jQuery中的新位置答案

【问题标题】：Setting the offset property multiple times causes an element to jump to a new place in jQuery多次设置偏移属性会导致元素跳转到jQuery中的新位置
【发布时间】：2012-01-11 23:54:11
【问题描述】：

我正在尝试使用 jQuery 创建类似于工具提示的效果。

我正在重复使用相同的 <div> 元素 (id="tooltip") 来显示工具提示。因此，每次用户将光标移到应显示工具提示的元素上时，我都需要不断移动此 <div> 元素。当我使用offset() 属性时，它第一次运行良好，但如果我反复将鼠标从一个图标移动到另一个图标，工具提示就会开始跳转到不同的位置。

你可以在这里试试：

http://jsfiddle.net/ZbwjQ/2/

尝试反复将鼠标从一个图标移动到另一个，您会注意到工具提示错误地跳来跳去。它应始终立即显示在悬停图标的右侧。

【问题讨论】：

标签： jquery google-chrome position

【解决方案1】：

你的代码有几个问题。

Div 不是自闭合标签：

<div />     <!-- Wrong -->
<div></div> <!-- Good -->

当你有空的 div 时，在你的 CSS 中添加以下声明以确保它们有一个正文：

div {
  content: "";
}

在您的情况下，jQuery offset() 函数似乎有问题，因为您隐藏了 #tooltip。更喜欢下面的代码来改变它的偏移量：

$('#tooltip').css({
  top: o.top,
  left: o.left
});

另外，o 的创建似乎很没用。你只需要直接修改offsetvariable:

var offset = $(this).offset();
offset.left += $(this).width();
$('#tooltip').css({
    top: offset.top,
    left: offset.left
});

最后，尽量不要使用选择器多次访问同一个元素。每次调用时，jQuery 都必须在整个 DOM 树中找到你的元素。

var tooltip = $("#tooltip"); // Use it in mousenter/mouseleave => Avoids 2 useless selections

// In your mousenter function
var el = $(this); // Use "el" to get offset/width => 1 useless selection avoided

你可以找到一个有效的 jsfiddle here。

【讨论】：

【解决方案2】：

当元素被隐藏时，Jquery 函数.offset() 无法正常工作。见帖子：jquery: get the offset of hidden element

【讨论】：

【解决方案3】：

我对 JQuery 和 javascript 有几天的了解，我自制的工具提示偶尔会跳到屏幕的奇怪区域。在 Joomla 中跟踪调试位置中的位置变量，我在那里看不到任何问题，工具提示被告知要转到正确的位置。它只是不会一直乖乖地去那里。我看到了这篇文章，觉得很有道理，所以我为我不止一次调用的选择器创建了变量。甚至没有使用 css 设置位置，所以我仍然使用偏移量。尽管如此，跳跃问题完全解决了，我根本无法让工具提示定位变得混乱。浪费了一些时间，正如您对新人所期望的那样，但我总是会在开始时立即声明变量。此外，我们在 Delphi 中也是这样做的。

【讨论】：