3

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

这是我的情况：我在一个大的 div 元素中有 6 个 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/这是我的情况

4

1 回答 1

3

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

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

于 2013-09-16T11:39:11.217 回答