使用Jquery动画调整父容器大小

Question

我希望能将子div元素动画化到父div元素中。我的情况是：我有6个div元素放在一个大的div元素里，它们在网页中有不同的位置。当其中一个div元素被点击时，我希望它可以动画化并调整大小到父元素的高度、宽度和位置。这是我的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/ 这是我的情况。

- BlackShawarna

---

尝试为您的问题创建一个小测试程序吧 :) - Vinay Pratap Singh Bhadauria

一个小调琴会很不错。 - Denny Smith

你的意思是在父级 div 的中间开始动画吗？ - Jean-Paul

Answer 1

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

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）。

- Cyril N.

---

最后的代码。我提供了两个可行的例子。一个是从正方形被点击的位置开始（我的最爱），第二个是从父容器的中心开始。 - Cyril N.