为什么这个Jquery动画会随机跳转？

Question

小提琴：http://jsfiddle.net/2NFNS/

HTML：

<div id = 'text'>Text</div>

JS：

$('#text').on('click', function() {
    $('#text').animate({'top':'-300px'}, 3000);
});

的CSS：

#text {
    position:absolute;
    top:calc(25% + 125px);
    left:calc(50% - 285px);

    text-align: left;
    height:50px;
    width:500px;
    background:red;
    color:#aaa;
}

为什么它跳到顶部，然后动画？另外，为什么文本不显示？

Answer 1

我建议您使用CSS3过渡。

CSS

#text {
    position:absolute;
    top:calc(25% + 125px);
    left:calc(50% - 285px);

    text-align: left;
    height:50px;
    width:500px;
    background:red;
    color:#aaa;
    -webkit-transition:all 3.0s ease-in-out;
    -moz-transition:all 3.0s ease-in-out;
    -o-transition:all 3.0s ease-in-out;
    transition:all 3.0s ease-in-out; 
} 

JS

$('#text').on('click', function() {
    $('#text').css('top','-300px');
});

You can see the example here