요소 높이를 동적으로 변경하면서 jquery wookmark 플러그인 사용

Question

나는 wookmark 플러그인을 사용하고 있으며 웹 사이트에 표시되는대로 작동하도록했습니다. 내 유스 케이스에서 특정 요소 위로 마우스를 가져 가면 세로로 "확장"됩니다. 이는 분명히 해당 열의 확장 요소 아래에있는 요소의 절대 위치를 엉망으로 만듭니다. 내 유스 케이스를 처리하기 위해 wookmark 플러그인을 수정/보강하려고 노력 중이고이 문제에 접근 할 수있는 방법에 대한 조언을 누군가가 가지고 있는지 궁금해하고 있습니다.

감사합니다.

Answer 1

나는 어떤 방법으로도 jQuery 전문가가 아니지만 제안 사항이 있습니다.

요소 마우스 오버시 원래 div 상단에 새 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 전문가가 아니기 때문에 즉시 작동하지 않을 수도 있지만 도움이 될 수 있습니다.