2014-02-08 52 views
0

我有在webpage.The比分板4個選項的問題是,在屏幕的右上角現在動畫文本到屏幕的右上角

<div id="score" style="position:fixed;top:0;right:0;"> 
<p><b>Score:</b>1234</p> 
</div> 

用戶點擊時在第一次嘗試的正確答案中,我想淡入屏幕中心的文字+10,然後漂浮到右上角,得分增加10.

我完成了邏輯部分正在更新分數,但CSS部分正在爲我創建頭痛。對於淡入文本「+10」(也許我可以使用z-index使它出現在屏幕外)和動畫它在右上角,我需要一些片段或教程的幫助。

我在CSS中間經歷和無法弄清楚的伎倆所需要的animation.I試圖在谷歌,但與keywords.Please有問題幫助

+0

見jQuery的'.css'方法:http://api.jquery.com/css/。你需要'fadeIn'還是移動'div'? –

+0

也許一個jsfiddle會有幫助嗎? – TimSPQR

+0

@IstiaqueAhmed:第一個'+ 10'淡入,同樣的東西移動到右上角 –

回答

2

你基本上做到四個步驟:

  • 創建絕對定位在任何你想要的「+10」文本。最初隱藏。
  • 淡入文 - .fadeIn()
  • 移動文本的角落 - .animate()
  • 淡出文本出來 - .fadeOut()

見琴:http://jsfiddle.net/_abl/kz6WY/

+0

:正是我想要的 –