這個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動畫爲什麼會有隨機跳躍？

回答

相關問題