动态更改元素高度时使用jquery wookmark插件

Question

我正在使用wookmark插件，并使其在网站上显示的效果正常工作。 在我的用例中，当我将鼠标悬停在某个特定元素上时，它会垂直“扩展”。 显然，这弄乱了该列中扩展元素下方元素的绝对位置。 我试图修改/增强wookmark插件以处理我的用例，并且想知道是否有人对我如何解决此问题有一些提示。

谢谢。

Answer 1

无论如何我都不是jQuery专家，但是我有一个建议。

在元素鼠标悬停时，在原始分区上创建一个新的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专家，因此这可能无法立即起作用，但可能会有所帮助。