Question

我想将div子元素设置为父div元素。

这是我的情况：我有6个div成为一个大div元素。他们在我的网页中有不同的位置。在其中一个div的click事件中，我想它会动画并调整父级的高度和宽度尺寸和位置。

这是我的js：

$('.divChildrenClass').click(function (event) {

    //get div ID
    var currentId = $(this).attr('id');

    var extraimg = $('#' + currentId).clone();
    var of = $('#' + currentId).offset();
    extraimg.css({
        position: 'absolute', top: of.top, left: of.left, margin: '5px'
    })
        .appendTo("#divParent")
        //make bigger
       .animate({
           height: $('#second').height() + 'px',
           width: $('#second').width() + 'px'
           //top: '-' + $('#' + currentId).top() + 'px', 
           //bottom: '-' + $('#' + currentId).bottom() + 'px',
           //left: '-' + $('#' + currentId).left() + 'px',
           //right: '-' + $('#' + currentId).right() + 'px'
           //position: "absolute"
       }, 1500,
)};

我也想在div父母的中间开始动画。

提前致谢

编辑：http://jsfiddle.net/v28qZ/这是我的情况

Answer 1

更新：根据您的小提琴，这是我的解决方案：

http://jsfiddle.net/v28qZ/2/

$('.square').click(function (event) {
    event.preventDefault();

    // Get square ID
    var currentId =     $(this).attr('id'),
        extraimg =      $('#' + currentId).clone(),
        currentOffset = $('#' + currentId).offset(),
        parent =        $('#second'),
        parentOffset =  parent.offset();

    extraimg
        .css({
            'position': 'absolute',
            'top': currentOffset.top,
            'left': currentOffset.left,
            'margin': 0
        })
        .appendTo(parent)

        //make bigger
        .animate({
            'height': parent.height(),
            'width': parent.width(),
            'top': parentOffset.top,
            'left': parentOffset.left
        }, 1500)

        .on('click', function () {
            $(this).stop(true).remove();
        });
});

如果你想让它从父div的中心开始：

http://jsfiddle.net/v28qZ/3/

$('.square').click(function (event) {
    event.preventDefault();

    // Get square ID
    var currentId =     $(this).attr('id'),
        extraimg =      $('#' + currentId).clone(),
        parent =        $('#second'),
        parentOffset =  parent.offset();

    extraimg
        .appendTo(parent)
        .css({
            'position': 'absolute',
            'top': (parentOffset.top + (parent.height()/2)),
            'left': (parentOffset.left + (parent.width()/2)),
            'height': 0,
            'width': 0,
            'margin': 0
        })

        //make bigger
        .animate({
            'height': parent.height(),
            'width': parent.width(),
            'top': parentOffset.top,
            'left': parentOffset.left
        }, 1500)

        .on('click', function () {
            $(this).stop(true).remove();
        });
});

一些信息：

当您在jQuery中操作css属性时（在我们的例子中，.css()，.animate()），您可以传递数字而不是字符串，也不会添加使用的格式（“px”）。 jQuery会自动假设它的像素（px）。

Jquery动画为父级大小

1 个答案: