在動態改變元素高度的同時使用jquery wookmark插件

Question

我使用的是wookmark插件，並且在他們的網站上顯示它的工作。在我的使用案例中，當我將鼠標懸停在特定元素上時，它會垂直「擴展」。這顯然混淆了該列中展開元素下方元素的絕對位置。我試圖修改/增加wookmark插件來處理我的用例，並想知道是否有人對我如何解決這個問題有一些提示。

謝謝。

Answer 1

我不是任何方式的jQuery專家，但我有一個建議。

在元素mouseover上，創建一個位於原始頂點上的新div。這顯然需要修改以適應您的「擴展」需求。我不確定你擴展的尺寸是多少，或者你是否在爲它製作動畫 - 所以我在這個例子中創建了與原始大小相同的新div。

使用此方法會將原始框放在原來的位置，但會覆蓋相同大小且位置相同的新框，而不會影響框的其餘部分。

<script> 
$(document).ready(function(e) { 
    $('#theHoverElement').mouseenter(function() { 

     // on mouseover, get offset values and sizes 
     var offset = $(this).offset(); 
     var top = offset.top(); 
     var left = offset.left(); 
     var height = $(this).height(); 
     var width = $(this).width(); 

     // create a new div element with the same values 
     $("#mainPageContainer").append("<div style='position:absolute; top:"+top+"; left:"+left+"; width:"+width+"; height:"+height+"; z-index:10000;'>Hello World!</div>") 

     // here you could put an expanding function 
     $(this).animate({ // some height & width properties }, 600); 
    }); 
}); 
</script> 

正如我所說，我不是jQuery專家，所以這可能不會立即工作，但可以幫助。