Question

我正在尝试制作动画时打开图像有点像：http://arzbhatia.com/在投资组合部分。

这是我已经完成的，但它无法正常工作。

以下是我所做的事情：jFiddle

无论我点击哪张图片，div都会显示在同一个地方。如果我从#test_div中删除位置：absoulte，它似乎在图像之后添加div，将其余部分移到底部。

Answer 1

我确实改变了你的小提琴，并创造了行。试试这样： http://fiddle.jshell.net/MYXcf/4/

Answer 2

div位于同一个地方，因为图像正从其父级（LI）中浮出。如果将鼠标悬停在列表元素上，则可在Chrome开发工具中看到此信息。

修复是不浮动任何东西并使LI display:inline-block使它们占据dom中的空间。你还需要添加一些Javascript来增加LI的高度，以便在添加它时容纳#test_div因为它的定位是绝对的。

此处的完整代码：http://fiddle.jshell.net/MYXcf/3/

此处更新了代码：http://fiddle.jshell.net/MYXcf/5/

Answer 3

你必须将另一个div命名描述放入你的所有内容中。像这样：

<div id="gallery">
    <ul>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
        <li class="image_item">
            <img class="gal_images" src="http://goo.gl/rpys4M">
            <div class="description"></div>
        </li>
    </ul>
</div>

还有一些css来设计这个：

ul {
    list-style-type: none;
}
#gallery {
    height: 500px;
    margin: 0 auto;
    width: 500px;
    margin-top: 100px;
}
.click_images {
    vertical-align: top;
    display: block;
    position: relative;
}
.gal_images {
    height: 220px;
    width: 220px;
    float: left;
    font-size: 40px;
    color: #fff;
    margin: 5px;
}
.image_item {
    width: 220px;
    float: left;
}
#test_div {
    position: absolute;
    top: auto;
    height: 200px;
    width:100%;
    background: #000;
    overflow: hidden;
}
.description {
    display: none;
}

如果描述已经打开，jQuery将切换，如果它已打开，它将隐藏，否则它将打开。

var opened = false;
$('.image_item').click(function () {
    if (!opened) {
        opened = true;
        $(this).find('.description').slideDown('500').append('hahaha');
    } else {
        opened = false;
        $(this).find('.description').slideUp('500');
    }

});

你会在这里找到一个小提琴：http://jsfiddle.net/fm9L4/

单击图库中的图像后滑出描述

3 个答案: