根據位置對div進行動畫處理

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;
}

工作的小提琴

動畫對於第一個左元素很好用。 如何管理處於不同職位的其余元素。

Answer 1

您需要為on.click事件上的這些div的top ， left屬性設置動畫。

我能得到的最接近的是： 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設置動畫。

小提琴： 小提琴