jquery - 在 jQuery 中定位出现问题

Question

看看这个小提琴：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);

Answer 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/