1

I would like to run a jquery which extends a box(div) without affecting on page layout.Here is a sample http://themes.ddwebstudios.net/?theme=photon&type=html

As you can see if you mouse over on the small transparent box under the image (accross the page) the box will be slideup without changing the page size.

I know how to use .hide() and .show() or slidedown and slideup functions with a display:hidden; box format but as you know there are some issue here as I would likw to display a portion of box and also I dont want to have any changes on pagelayout

Here is the sample which I tried to figure out how to do it, Can you please take a look at that and let me know how I can add a portion of magicDiv box (5% of top) before the row_3 and extend it to full size using jquery functions without affecting(defarming) the page layout?

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

Thanks for your time in advance.

4

2 回答 2

1

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

如果您在album-thumbs打开 div 时通过右键单击它来检查它，您会看到它是使用 CSS 完成的：

在此处输入图像描述

关键要素是：

position: absolute;
z-index: 10;

此外，这不是您问题的一部分，您可以使用它display: none;来避免影响页面布局或visibility: hidden;仍然让 div 影响页面布局。( display: hidden;，正如你所写的，不是有效的 CSS)

于 2012-05-09T15:42:03.400 回答
0

加藤很到位。这是 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() 时，它会将属性 hidden 附加到元素上，这就是我测试查看 div 元素的“视觉”状态的方式。在这个例子中，我在点击事件上有这个，但如果需要，您可以将事件逻辑更改为 .hover()

我已经修改了您原来的 jsFiddle文件以显示一个工作示例

于 2012-05-09T15:59:23.080 回答