Hide/Show
Basically this is just a matter of saying .hide(n) or .show(n)
where n=time in milliseconds ("slow" or "fast" can be used too)
(use .toggle(n) to toggle between hide/show)
Eg...
$("#elementID").hide(3000); or
$("#elementID").show(5000);
Fade In/Out
Basically this is just a matter of saying .fadeIn(n) or .fadeOut(n)
where n=time in milliseconds ("slow" or "fast" can be used too)
(use .fadeToggle(n) to toggle between fading in/out)
Eg...
$("#elementID").fadeIn(3000); or
$("#elementID").fadeOut(5000);
There is also a .fadeTo(n, p) event which will just fade the element to
a given opacity at a specific speed. (n=speed p=opacity (0 to 1))
Slide Up/Down
Basically this is just a matter of saying .slideUp(n) or .slideDown(n)
where n=time in milliseconds ("slow" or "fast" can be used too)
(use .slideToggle(n) to toggle between sliding Up/Down).
To me the
result just looks like the Hide/Show looks but without the fading.
Eg...
$("#elementID").slideUp(3000); or
$("#elementID").slideDown(5000);
Animate
This is a bit different to the above as you need to decide
what you want to do and build up the cammand(s) in order to achieve it.
For example you may want to change the text to red, opacity to 0.5 & change the size of the text.
The format is .animate( {command, command, command}, interval)
Eg...
$("#elementID").class("color", "red").animate({
opacity: "0.5",
fontSize: '3em'
}, 3000);
(There are various CSS commands you cannot do directly in .animate() so you will need
to use .css() commands as well and chain them together - like I do in my example)
There is a technique called chaining, that allows us to run multiple jQuery commands, one after the other,
on the same element(s).
(This way, browsers do not have to find the same element(s) more than once)
To chain an action, you simply append the action to the previous action.
The following example chains together the css(), slideUp(), and slideDown() methods.
The "p1" element first changes to red, then it slides up, and then it slides down:
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
Also acceptable is...
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
I wont repeat an example here as I use 'chaining' in my Animate section (above).
Stop
If you need to stop an animation from running you can .stop()
Eg...
$("#elementID").stop(); or
$("#elementID").stop(stopAll, goToEnd);
The .stop() will stop all ACTIVE (currently running) animations and allow any queued animations
to carry on running.
The .stop(stopAll, goToEnd) will stop ALL animations (active & queued) and then it will
complete the currently running animation immediately.
(stopAll & goToEnd are both optional and default to false - NOTE... You need to use
.stop(true, true) & not .stop(stopAll, goToEnd) as stopAll & goToEnd are not defined)
Callback
JavaScript statements are executed line by line. However,
with effects, the next line of code can be run even though the effect is
not finished. This can create errors.
To prevent this, you can create a callback FUNCTION.
A callback function is executed after the current effect is finished.
(You should probably use this if you need something specific to run
AFTER the animation)
Eg...
$("#elementID").hideToggle(3000, Function() {alert("Alert Message example");});