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

时间:2014-02-08 15:32:07

标签: jquery html css css3

我在网页上有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的中级经验,无法弄清楚所需动画的技巧。我试过google但是关键字有问题。请帮忙

1 个答案:

答案 0 :(得分:2)

你基本上做了四个步骤:

  • 创建绝对定位于您想要的“+10”文本。最初是隐藏的。
  • 淡化文字 - .fadeIn()
  • 将文字移至角落 - .animate()
  • 淡出文字 - .fadeOut()

请参阅小提琴:http://jsfiddle.net/_abl/kz6WY/