javascript - 在 jquery 中立即为 div 设置更大和更小的动画

Question

我想在 jQuery animate 中为大和小的 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