出問題時定位在jQuery的

看看這個小提琴：http://jsfiddle.net/BramVanroy/tKL8E/出問題時定位在jQuery的

當你將鼠標懸停「接觸」，然後給它的子項「adverteren」，工具提示的項目上面顯示在它旁邊，而不是。當你用鼠標返回「聯繫」並再次返回到「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);

來源

2013-01-13 Bram Vanroy

看到不同的問題，你的代碼片段..懸停的第一個孩子，那麼第二，回到第一和工具提示動畫路徑下跨越鼠標造成mouseout觸發 – charlietfl

是的，這也是一個問題，爲了避免這種情況：需要布爾動畫攔截器，這是在標題動畫完成時發佈的。 –

這是因爲你的計算基於工具提示寬度左側位置之前設置新的文本，或者瀏覽器引擎之前重新計算元件尺寸。

讓我再次檢查以找到解決方案或解決辦法。

UPDATE： 改變這樣

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/

來源

2013-01-13 14:41:56

D'oh！多麼愚蠢的錯誤。感謝您的發現！ –

出問題時定位在jQuery的

回答

相關問題