单击时调整div的大小，并在父级中隐藏所有其他div。

Question

我正在尝试创建一个画廊，但是对于jQuery来说我是一个新手，我陷入了僵局。

我想创建一个由几张小图片组成的画廊，这些图片在单击时会扩展到全宽，然后在另一张上恢复为原始图片。 同时，我希望在单击的图像展开时隐藏父包装中的所有其余div。 所有这些都必须顺畅而精致地运行。 那是我无法达到的。 所有图片均具有.image类，每个图片均具有.one .two类，依此类推。 他们都在父母的保护下。

$(".image").bind('click', function() {
     $(this).animate({width: "100%", height: "100%"}, 800);
$(".image").not(this).hide("slow");
});

$('.image').toggle(function(){
    $(this).animate({width: "100%", height: "100%"}, 800);    
}, function(){
    $(this).animate({width: "90px", height: "90px"}, 800);
    $(".image").not(this).show("slow");
});

我现在的努力结果http://jsfiddle.net/baltar/TRuNv/4/

http://css-tricks.com/examples/InfoGrid/

另外，设置动态调整父div的高度也很不错，因此任何比例的图像都适合。 我试图将父母的身高设置为自动，但这没有用。

我意识到我的问题要问的很大，但也许至少有人可以建议我应该朝哪个方向发展。

提前致谢！

Answer 1

以下jQuery可以满足您的大部分要求：

$(".image").bind('click', function() {
    var that = $(this), // caching the current element
        offsets = that.position(), // edited to use position() instead of offset()
        top = offsets.top,
        left = offsets.left,
        clone = that.clone(),
        parent = that.parent(), // caching the parent element
        width = parent.width(),
        height = parent.height();

    // adding the 'clone' element to the parent, and adding the 'clone' class-name    
    clone.addClass('clone').appendTo(parent).css({
        // positioning the element at the same coordinates
        // as the current $(this) element
        'top': top,
        'left': left
    }).animate({
        // animating to the top-left corner of the parent, and
        // to the parent's dimensions
        'top': 0,
        'left': 0,
        'width': width,
        'height': height
    }, 1000).click( // binding a click-handler to remove the element

    function() {
        // also fading the sibling elements back to full opacity
        $(this).fadeOut().siblings().animate({
            'opacity': 1
        }, 1000);
    }).siblings().animate({
        // fading-out the sibling elements
        'opacity': 0.1
    }, 1000);

});​

这需要CSS：

.wrap {
    /* your other unchanged CSS, and: */
    position: relative;
}
.clone {
    position: absolute;
}

JS小提琴演示 。

参考文献：

• addClass() 。
• animate() 。
• click() 。
• clone() 。
• fadeOut() 。
• height() 。
• offset() 。
• parent() 。
• position() 。
• siblings() 。
• width() 。