1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<input type="button" value="Hi!" id="btnOne" />
 
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
    var count = 0;
    $('#btnOne').click(function()
    {
        count++;
        var hi =  $('<div>Hi! - ' + count + '</div>')
           .css('width', '50px')
           .css('height', '50px')
           .css('background-color', 'lightyellow')
           .css('border', 'solid 1px gainsboro')
           .css('line-height', '50px')
           .css('vertical-align', 'middle')
           .css('text-align', 'center')
           .css('position', 'absolute')
           .css('top', ($(this).offset().top - 52) + 'px')
           .css('left', ($(this).offset().left) + 'px');
 
        $('body')
           .append(hi)
           .fadeIn('fast', 
            function()
            {
                setTimeout(function()
                           {
                               $(hi).fadeOut('fast');
                           }, 1000);
            });
           
    });
});
</script>