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

【问题标题】：Using jquery wookmark plugin while dynamically changing heights of elements在动态更改元素高度时使用 jquery wookmark 插件
【发布时间】：2012-02-04 14:59:41
【问题描述】：

我正在使用wookmark 插件，并且已经让它像他们在他们的网站上显示的那样工作。在我的用例中，当我将鼠标悬停在特定元素上时，它会垂直“扩展”。这显然会弄乱该列中展开元素下方的元素的绝对定位。我正在尝试修改/增强 wookmark 插件来处理我的用例，并且想知道是否有人对我如何解决这个问题有一些提示。

谢谢。

【问题讨论】：

标签： javascript jquery css

【解决方案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 专家，所以这可能不会立即起作用，但会有所帮助。

【讨论】：