如何在不影响页面布局的情况下使用jQuery扩展框的大小

Question

我想运行一个扩展box（div）而不影响页面布局的jQuery。这里是一个示例http://themes.ddwebstudios.net/?theme=photon&type=html

如您所见，如果将鼠标悬停在图像下方的透明小框上（整个页面），则该框将向上滑动而不更改页面大小。

我知道如何在显示中使用.hide（）和.show（）或slidedown和slideup函数： 框格式，但是如您所知，这里有些问题，因为我希望显示框的一部分，而且我也不想在pagelayout上进行任何更改

这是我试图找出方法的示例，请您看看，让我知道如何在row_3之前添加magicDiv框的一部分（顶部的5％）并将其扩展为完整的使用jquery函数的大小，而不会影响（布局）页面布局？

http://jsfiddle.net/Behseini/nuC69/2/

谢谢您的时间。

Answer 1

这些框不会更改页面大小，因为它们使用绝对定位和z-index。

如果您在打开album-thumbs div时右键单击它，您会发现它是使用CSS完成的：

关键要素是：

position: absolute;
z-index: 10;

另外，这也不是问题的一部分，您应该使用display: none; 为了避免影响页面布局或visibility: hidden; 仍然使div影响页面布局。 （ display: hidden;如您所写，不是有效的CSS）

Answer 2

加藤是现场。 这是jQuery（）的show hide（）部分的小片段

我的有点不同，因为我喜欢使用数组来存储扩展窗口的高度。 这使我可以扩展各种高度的窗口，并减少jQuery代码

$(document).ready(function () {
    //create a string array to store various window sizes then based upon the attribute id of the element


        //load the apporaiate array value
        var winHeight = ["220px",
                         "100px",
                         "90px",
                         "400px",
                         "150px"];

    $(function () {
        $('.div1').hide();
    });

    $('.div2').click(function () {
        var cssProp = winHeight[$(this).attr('id')];

        if ($('.div1').is(':hidden')) {
            $('.div1').show();
            $('.div1').animate({ "height": cssProp }, 'slow');
        }
        else {
            $('.div1').hide("slow");
            $('.div1').animate({ "height": "0px" }, 'slow');
        }
    });

唯一应用的CSS是

.div1
{
    margin: 5px;
    height: 0px;
    font-size: .9em;
    margin-left: auto;
    margin-right: auto;
}

通过在div元素中拾取属性ID来分配值

<div id="1" class="div2" /> // would set the height to 100px

当使用hide（）时，它将隐藏的属性附加到元素上，这就是我正在测试的div元素的“可视”状态。 在此示例中，我在click事件上有此事件，但是如果需要，您可以将事件逻辑更改为.hover（）

我已经修改了您的原始jsFiddle文件以显示一个有效的示例