jQuery: interactions, creation of elements and fade-outs!
Written by Luca Bonacorsi   
11 January 2012

jQuery: interactions, creation of elements and fade-outs!CLICK HERE TO SEE THE WORKING EXAMPLE.
If your goal is to create HTML elements dynamically with their origin corresponding to the 'mouse' pointer position in jQuery, this is the right example to study.
Tested with the main browsers (a few CSS rules are not supported by some of them however), this example focuses on a '<DIV>' item you can click on.
Whenever you click, the mouse coordinates, relative to the document, are translated into coordinates relative to the '<DIV>' element.

jQuery: interactions, creation of elements and fade-outs!

Whenever the mouse is released, a new '<P>' element is created on the fly and added as a child of the '<DIV>' item. Its position properties are updated and some CSS rules are dynamically applied to it to alter its appearance and to format its text.
Moreover, once generated, the '<P>' items start to fade-out by means of animations.
This is an important example which clearly shows the power of HTML/HTML 5, CSSC/SS3 and jQuery combined together.
Have fun! :)


Commenti (0)
Solo gli utenti registrati possono scrivere commenti!