Question

我已经完成了以下操作来动画div来获得一种缩放效果。

HTML

<div class='tile-container'>
    <div class='tile'>
        <p>testing</p>
    </div>
    <div class='tile'></div>
    <div class='tile'></div>
    <div class='tile'></div>
    <div class='tile'></div>
    <div class='tile'></div>
    <div class='clearfix'></div>
</div>

JS

$('.tile').click(function(){
    if($(this).hasClass('clicked')){
        return false;
    }

    var itemPosition = $(this).position(),
        containerWidth = ( $('.tile-container').width() / 100 ) * 91,
        containerHeight = ( $('.tile-container').height() / 100 ) * 86,
        clone = $(this).clone();

    $(clone).css({
        'position':'absolute',
        'top': -itemPosition.top,
        'left': itemPosition.left
    }).appendTo('.tile-container').animate({
        width : containerWidth,
        height: containerHeight
    }).children().fadeOut("slow").promise().done(function(){
        $(clone).append("<p class='back'>back</p>").addClass('clicked')
    });
})

$(document).on('click','.back',function(){
    var tile = $(this).parent()
    $(tile).animate({
        width : '50px',
        height: '50px'
    },function(){
        $(tile).remove();
    })
})

CSS

body{
    margin:0px;
    padding:0px;
}
.tile-container{
    background-color:#ccc;
    width:210px;
    height:140px;
}
.tile{
    background-color:blue;
    width:50px;
    height:50px;
    margin:10px;
    float:left;
    cursor:pointer;
}
.clearfix{
    clear:both;
}

The working fiddle

动画适用于第一个左侧元素。如何管理具有不同位置的其余元素。

Answer 1

您需要为top事件中的div设置left，on.click属性的动画。

我能得到的最近的是：jsfiddle。

Answer 2

只需添加top：0和left：0样式到动画

.appendTo('.tile-container').animate({
        width : containerWidth,
        height: containerHeight,
        'top': 0,
        'left': 0
    })

http://jsfiddle.net/z1xwxan5/13/

Answer 3

如果你将top：0和left：0添加到动画中，它将来自你想要的元素。

animate({
    top : 0,
    left : 0,
    width : containerWidth,
    height: containerHeight
})

让它返回是有点棘手，但我想让itemPosition成为一个全局范围变量，当你点击一个元素时，它会被分配，然后使用它来为top：itemPosition.top和left：itemPosition.left设置动画。

小提琴：fiddle

根据位置动画div

3 个答案: