javascript - Floating and fading text? -

javascript - Floating and fading text? -

i had idea. wonder if it's possible accomplish jquery/css3 1 effect: click on element made appear new text on element/cursor position. text sliding , fading out. button/element doesn't change.

it might little bit hard describe in text set within picture:

http://i.imgur.com/9t60eug.png

it quite usual effect in computer games when purchase don't remember i've ever seen on website.

please, know how called , can find solution? or can give me clues accomplish it? thanks.

edit: changed reply after asker explained better

i see want now. here updated jsfiddle: http://jsfiddle.net/d4qgc/667/ appends text , applies animation using css opacity , top positioning appended text afterwards.

html:

<p><br><br><br></p> <!-- pushing button downwards bit --> <div id="content"> <button id="add">add cart</button> </div>

js:

$(function () { $('#add').on('click', function () { $('<p id="message">+$59.99!</p>').appendto('#content'); }); }); $("#add").click(function() { $("#message").animate({ top: -100, opacity: 0 }, 1000,"linear", function() { $(this).remove(); }) });

css:

#message { position: relative; top: -50px; }

javascript jquery html css