Function |
Description |
$ (Selector). Hide () |
Hide selected elements |
$ (Selector). Show () |
Show selected elements |
$ (Selector). Toggle () |
Switch (between hide and display) the selected Element |
$ (Selector). slidedown () |
Slide down (Display) the selected Element |
$ (Selector). slideup () |
Slide (hide) selected element up |
$ (Selector). slidetoggle () |
Switch the selected elements to move up and down |
$ (Selector). fadein () |
Fade in selected Element |
$ (Selector). fadeout () |
Fade out selected Element |
$ (Selector). fadeto () |
Fades Out the selected element to a given opacity |
$ (Selector). animate () |
Execute a Custom Animation for the selected Element |
Syntax for creating a Custom Animation using the jquery function:
$ (Selector). animate ({Params}, [duration], [easing], [callback])
The key parameter isParams. It defines the CSS attributes of the generated animation. You can set multiple such attributes at the same time:
Animate ({width: "70%", opacity: 0.4, marginleft: "0.6in", fontsize: "3em "});
The second parameter isDuration. It defines the time used to apply the animation. It is set to "slow", "fast", "normal", or millisecond.
Instance 1
<SCRIPT type = "text/JavaScript"> $ (document ). ready (function () {$ ("# Start "). click (function () {$ ("# box "). animate ({Height: 300}, "slow"); $ ("# box "). animate ({width: 300}, "slow"); $ ("# box "). animate ({Height: 100}, "slow"); $ ("# box "). animate ({width: 100}, "slow") ;}); </SCRIPT>
Function |
Description |
Contents (selector).html (content) |
Change the (internal) HTML of the selected Element |
$ (Selector). append (content) |
Append content to the (internal) HTML of the selected Element |
$ (Selector). prepend (content) |
Prepend content to the (internal) HTML of the selected Element |
$ (Selector). After (content) |
Add HTML after the selected Element |
$ (Selector). Before (content) |
Add HTML before the selected Element |