这个jquery动画为什么会有随机跳跃？

小提琴：http://jsfiddle.net/2NFNS/这个jquery动画为什么会有随机跳跃？

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

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

来源

2014-05-16 mango

工作正常，我。文字可能不会显示，因为您已经调整了窗口的大小。 – Joeytje50

我没有看到跳跃。我看到文字 –

离开，旋转3次，跳到右脚，返回到键盘并击中控制-F5。开玩笑。以为我会尽量减轻对你来说可能是噩梦的事情。希望你找到解决方案。 –

我会建议你使用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; 
}

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

You can see the example here

来源

2014-05-16 22:25:21 NEOLPAR

这个jquery动画为什么会有随机跳跃？

回答

相关问题