Question

我想在jQuery动画中为div做大和小的动画。我写了这段代码：

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

使用此代码，大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

动画div越来越大立即在jquery中

1 个答案: