animate div越來越小jquery中的立即數

Question

我想在jQuery動畫中爲div設置大小。我寫了這段代碼：

$(this).animate({ 
    opacity: 0, 
    top: "-=100", 
    width: "38px", 
    height: "32px" 
}, 1500, function() { 
    $this.remove() 
}) 

有了這段代碼，大的div不會變小。我如何編輯這段代碼以便首先製作更大的div，然後立即變小？如果可以在CSS3中完成這項工作，請幫助在CSS3中完成。

謝謝。

Answer 1

隨着CSS3動畫和transform: scale();你可以做到這一點：

@-webkit-keyframes grow 
{ 
    0%{-webkit-transform:scale(1);} 
    50%{-webkit-transform:scale(2);} 
    100%{-webkit-transform:scale(1);} 
} 
@-moz-keyframes grow 
{ 
    0%{-moz-transform:scale(1);} 
    50%{-moz-transform:scale(2);} 
    100%{-moz-transform:scale(1);} 
} 
@-ms-keyframes grow 
{ 
    0%{-ms-transform:scale(1);} 
    50%{-ms-transform:scale(2);} 
    100%{-ms-transform:scale(1);} 
} 
#spin{ 
    position:absolute; 
    top:10%; 
    left:10%; 
    -webkit-animation-name: grow; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: grow; 
    -moz-animation-duration: 3s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-animation-name: grow; 
    -ms-animation-duration: 3s; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 
} 

See this fiddle