With jQuery, you can hide and show HTML elements with the hide() and show() methods:
syntax
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
If you click on the "Hide" button, I will disappear.
jQuery has the following slide methods:
slideDown()
slideUp()
slideToggle()
syntax
$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);
$(selector).slideToggle(speed,callback);
The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
slide down panel
Click to slide down panel
Hello world!
slide up panel
Click to slide up panel
Hello world!
toggle panel
Click to slide panel up or down
Hello world!
jQuery has the following fade methods:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
syntax
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity, callback);
The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).
The jQuery stop() method is used to stop an animation or effect before it is finished.
The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.
Syntax:
$(selector).stop(stopAll,goToEnd);
The optional stopAll parameter specifies whether also the animation queue should be cleared or not. Default is false, which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards.
The optional goToEnd parameter specifies whether or not to complete the current animation immediately. Default is false.
So, by default, the stop() method kills the current animation being performed on the selected element.
Click to slide down panel
Hello world!
jQuery Method Chaining - allows us to run multiple jQuery commands, one after the other, on the same element(s).
jQuery multi-commands!!
By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!
By using multiple animate commands objects can be moved around
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
Multiple elements can also be changed with the animate object
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
< div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO< /div>