窗口調整大小後重新計算高度

我有一個創建的函數，當我將鼠標懸停在父對象上時顯示'語音氣泡'。然而，氣泡設置爲顯示在父對象上方，按照其高度計算。窗口調整大小後重新計算高度

我正在努力將其應用到響應式設計中，因此寬度和高度都是動態的。我試着運行窗口後，該函數用下面的代碼調整：

$(window).resize(function() { 
    $('.popup').popup(); 
}).trigger('resize');

這看起來幾乎是這樣的伎倆，但它是相當馬車。您可以查看this jsfiddle I put together來查看我的意思。

在窗口調整大小之前，對話框氣泡正常工作，但是一旦它被調整大小，並且您將鼠標懸停在其中一個觸發對象上，對話框就會出現5次左右的重複動畫。

毫無疑問，這不是最初爲響應式設計編寫的，我不是一個JS開發人員，所以如果有人看到任何明顯的改進，我會很樂意接受它們！：D

2013-01-08 norsewulf

這是因爲popup（）被多次綁定到事件。只用這個。

$(document).ready(function() { 
$('.popup').popup(); 
});

並設置mouseover上的彈出位置。

2013-01-08 08:39:04

這並不爲我工作。一旦父容器的高度改變，講話泡泡就不再處於正確的位置。因此，我爲什麼要在窗口大小調整事件中運行函數。這是在我原來的jsfiddle中很難注意的，因爲我在父容器中只有「Lorem Ipsum」，並且高度不會改變，直到第二個字符下降到下一行。 – norsewulf

那麼你必須在鼠標懸停上設置彈出窗口的頂部和左側位置。這將解決您的問題。但是，如果您在window.resize中調用此函數，則會一次又一次地綁定該函數。 –

哦！所以我只需要在mouseover（）函數內設置我的高度變量？爾加！太容易了！它的工作原理！呃，我生氣了。但我也很高興。哈哈感謝您的幫助！ – norsewulf

刪除 -

$(window).resize(function() { 
    $('.popup').popup(); 
    }).trigger('resize');

然後添加

$('.popup').popup();

2013-01-08 09:05:18 HADI

這不起作用的原因我提到@Pitchai - 當容器的高度改變時，氣泡不再位於正確的位置。 – norsewulf

你有沒有看到這個 - http://jsfiddle.net/im4aLL/jMG4K/2/它的工作在那裏。告訴我你正在使用哪種瀏覽器 – HADI

如果您通讀了我和@Pitchai之間的評論主題，您將會看到爲什麼這不起作用。在你的jsfiddle中，嘗試縮小窗口，直到文本進入兩行。講話泡泡不再顯示在正確的位置。 – norsewulf

回答