在 jQuery 中定位出现问题答案

【问题标题】：Something goes wrong with positioning in jQuery在 jQuery 中定位出现问题
【发布时间】：2013-01-13 22:58:04
【问题描述】：

看看这个小提琴：http://jsfiddle.net/BramVanroy/tKL8E/

当您将“联系人”悬停在其子项“adverteren”上时，工具提示将显示在该项上方而不是旁边。当您然后用鼠标返回“联系”并再次返回“广告”时，工具提示显示得很好。这怎么可能？

相关代码：

var condition = offL > ((wW / 2) - $this.width()),
  properties = {},
  cssProp = {};

if (condition) {
  properties = {
    "left": (offL - tooltip.width() - 30)
  };
} else {
  properties = {
    "left": (offL + $this.width() + 25)
  };
}
$.extend(properties, {
  "top": ($this.offset().top + (posT / 2) - (tooltip.height() / 2))
});

tooltip.stop(true).text(title).animate(properties, 300).fadeTo(200, 1);

【问题讨论】：

看到不同的问题.. 悬停第一个孩子，然后是第二个，返回第一个，工具提示动画路径在鼠标下交叉导致鼠标移出触发
是的，这也是一个问题，为了避免这种情况：需要布尔动画拦截器，它在标题动画完成时发布。

标签： jquery jquery-animate positioning

【解决方案1】：

这是因为您在将新文本设置到其中或浏览器引擎重新计算元素大小之前根据工具提示宽度计算左侧位置。

让我再次检查以找到解决方案或解决方法。

更新： 像这样更改您的代码片段

tooltip.stop(true).text(title); // set the new text here

var condition = offL > ((wW / 2) - $this.width()),
  properties = {},
  cssProp = {};

if (condition) {
  properties = {
    "left": (offL - tooltip.width() - 30)
  };
} else {
  properties = {
    "left": (offL + $this.width() + 25)
  };
}
$.extend(properties, {
  "top": ($this.offset().top + (posT / 2) - (tooltip.height() / 2))
});

//and not here as you use width property to calculate the element position which is being changed when you change element text
tooltip.animate(properties, 300).fadeTo(200, 1);

看看http://jsfiddle.net/tKL8E/42/

【讨论】：