将文本设置为屏幕右上角的动画

Question

I have a question with 4 options on the webpage.The score board is on the top-right corner of the screen

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

Now when the user hits the correct answer in the first attempt I want to fade-in the text +10 on the center of the screen which then floats to the top-right corner where score is increased by 10.

I am done with the logical part which is updating the score,but the CSS part is creating headache for me.For fade-in the text "+10" (maybe I can use z-index to make it appear out of the screen) and animate it to top-right corner, I need slight help with either a snippet or a tutorial.

I have intermediate experience in CSS and couldn't figure out the trick for the required animation.I tried on google but having problem with the keywords.Please help

Answer 1

You basically do four steps:

• Create the "+10" text absolutely positioned wherever you want it. Initially hidden.
• Fade the text in - .fadeIn()
• Move the text to the corner - .animate()
• Fade the text out - .fadeOut()

See the fiddle : http://jsfiddle.net/_abl/kz6WY/