如何在不影響頁面布局的情況下使用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文件以顯示一個有效的示例