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 Fiddle demo

参考文献：

单击“调整div”并隐藏父级中的所有其他div。

1 个答案: