revision:
With jQuery, you can hide and show HTML elements with the hide() and show() methods.
Syntax hide():$(selector).hide(speed,callback);.
Syntax show(): $(selector).show(speed,callback);.
The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the hide() or show() method completes (see for this here below).
<div>
<a id="a1">Click the "Hide" button and I will disappear. <br>Click the "Show" button and I will show up.</a><br>
<button id="hide">Hide</button>
<button id="show">Show</button>
</div>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#a1").hide();
});
$("#show").click(function(){
$("#a1").show();
});
});
</script>
</pre>
The following example demonstrates the speed parameter with hide():
This is a paragraph with little content.
This is another small paragraph.
Codes:
<div>
<button id="3">Hide</button>
<p class="a2">This is a paragraph with little content.</p>
<p class="a2">This is another small paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#3").click(function(){
$(".a2").hide(2000);
});
});
</script>
You can also toggle between hiding and showing an element with the toggle() method. Shown elements are hidden and hidden elements are shown.
Syntax toggle(): $(selector).toggle(speed,callback);.
The optional speed parameter can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after toggle() completes.
This is a paragraph with little content.
This is another small paragraph.
Codes:
<div>
<button id="4">Toggle between hiding and showing the paragraphs</button>
<p class="a3" style="margin-left: 4vw;">This is a paragraph with little content.</p>
<p class="a3" style="margin-left: 4vw;">This is another small paragraph.</p>
</div>
<script>
$(document).ready(function(){
$("#4").click(function(){
$(".a3").toggle(2000);
});
});
</script>
With jQuery you can fade elements in and out of visibility.
The jQuery fadeIn() method is used to fade in a hidden element.
Syntax fadeIn(): $(selector).fadeIn(speed,callback);.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the fading completes.
The following example demonstrates the fadeIn() method with different parameters.
<div>
<button id="b">Click to fade in boxes</button>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red; margin-left: 5vw;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green; margin-left: 5vw;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue; margin-left: 5vw;"></div><br>
</div>
<script>
$(document).ready(function(){
$("#b").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
The jQuery fadeOut() method is used to fade out a visible element.
Syntax fadeOut(): $(selector).fadeOut(speed,callback);.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the fading completes.
The following example demonstrates the fadeOut() method with different parameters:
<div>
<button id="b1">Click to fade out boxes</button>
<div id="div4" style="width:80px;height:80px;background-color:red; margin-left: 5vw;"></div><br>
<div id="div5" style="width:80px;height:80px;background-color:green; margin-left: 5vw;"></div><br>
<div id="div6" style="width:80px;height:80px;background-color:blue; margin-left: 5vw;"></div><br>
</div>
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("#div4").fadeOut();
$("#div5").fadeOut("slow");
$("#div6").fadeOut(3000);
});
});
</script>
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.
If the elements are faded out, fadeToggle() will fade them in. If the elements are faded in, fadeToggle() will fade them out.
Syntax fadeToggle(): $(selector).fadeToggle(speed,callback);.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the fading completes.
The following example demonstrates the fadeToggle() method with different parameters:
<div>
<button id="b2">Click to fade in/out boxes</button><br>
<div id="div7" style="width:80px;height:80px;background-color:red; margin-left: 5vw;"></div><br>
<div id="div8" style="width:80px;height:80px;background-color:green; margin-left: 5vw;""></div><br>
<div id="div9" style="width:80px;height:80px;background-color:blue; margin-left: 5vw;""></div><br>
</div>
<script>
$(document).ready(function(){
$("#b2").click(function(){
$("#div7").fadeToggle();
$("#div8").fadeToggle("slow");
$("#div9").fadeToggle(3000);
});
});
</script>
The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1).
Syntax fadeTo(): $(selector).fadeTo(speed, opacity, callback);.
The required speed parameter specifies the duration of the effect. It 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 optional callback parameter is a function to be executed after the function completes.
The following example demonstrates the fadeTo() method with different parameters:
<div>
<button id="b4">Click to fade boxes</button><br><br>
<div id="div10" style="width:80px;height:80px;background-color:red; margin-left: 5vw;"></div><br>
<div id="div11" style="width:80px;height:80px;background-color:green; margin-left: 5vw;"></div><br>
<div id="div12" style="width:80px;height:80px;background-color:blue; margin-left: 5vw;"></div><br>
</div>
<script>
$(document).ready(function(){
$("#b4").click(function(){
$("#div10").fadeTo("slow", 0.15);
$("#div11").fadeTo("slow", 0.4);
$("#div12").fadeTo("slow", 0.7);
});
});
</script>
With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown(), slideUp(), slideToggle()
The jQuery slideDown() method is used to slide down an element.
Syntax slideDown(): $(selector).slideDown(speed, callback);.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the sliding completes.
The following example demonstrates the slideDown() method:
<div>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</div>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
The jQuery slideUp() method is used to slide up an element.
Syntax slideUp(): $(selector).slideUp(speed, callback);.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the sliding completes.
The following example demonstrates the slideUp() method:
<div>
<div id="flip1">Click to slide up panel</div>
<div id="panel1">Hello world!</div>
</div>
<script>
$(document).ready(function(){
$("#flip1").click(function(){
$("#panel1").slideUp("slow");
});
});
</script>
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods.
If the elements have been slid down, slideToggle() will slide them up. If the elements have been slid up, slideToggle() will slide them down.
Syntax slideToggle(): $(selector).slideToggle(speed, callback);.
The optional speed parameter can take the following values: "slow", "fast", milliseconds.
The optional callback parameter is a function to be executed after the sliding completes.
The following example demonstrates the slideToggle() method:
<div>
<div id="flip2">Click to slide the panel down or up</div>
<div id="panel2">Hello world!</div>
</div>
<script>
$(document).ready(function(){
$("#flip2").click(function(){
$("#panel2").slideToggle("slow");
});
});
</script>
ThejQuery animate() method is used to create custom animations.
Syntax animate(): $(selector).animate({params}, speed, callback);.
The required params parameter defines the CSS properties to be animated.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is a function to be executed after the animation completes.
The following example demonstrates a simple use of the animate() method; it moves a "div" element to the right, until it has reached a left property of 30vw.
<div>
<button id="b5" >start animation</button>
<div id="div1a" style="background:#98bf21;height:7vw;width: 7vw;position:relative;"></div>
</div>
<script>
$(document).ready(function(){
$("#b5").click(function(){
$("#div1a").animate({left:'30vw'});
});
});
</script>
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!
jQuery animate() - manipulate multiple properties.
Multiple properties can be animated at the same time:
<div>
<button id="b6">start animation</button>
<div id="div1b" style=" margin-left: 3vw; background:#98bf21;height:8vw;
width:8vw;position:relative;"></div>
</div>
<script>
$(document).ready(function(){
$("#b6").click(function(){
$("#div1b").animate({
left: '30vw',
opacity: '0.5',
height: '15vw',
width: '15vw'
});
});
});
</script>
It is possible to manipulate almost all CSS properties with the animate() method.
However, all property names must be camel-cased when used with the animate() method. Eg. "paddingLeft" instead of padding-left, "marginRight" instead of margin-right, and so on.
Also, color animation is not included in the core jQuery library. If you want to animate color, you need to download the Color Animations plugin from jQuery.com.
jQuery animate() - using relative values.
It is also possible to define relative values (the value is then relative to the element's current value). This is done by putting += or -= in front of the value.
<div>
<button id="b7">start animation</button>
<div id="div1c" style="background:#98bf21;height:100px;
width:100px;position:relative;"></div>
</div>
<script>
$(document).ready(function(){
$("#b7").click(function(){
$("#div1c").animate({
left: '20vw',
height: '+=5vw',
width: '+=5vw'
});
});
});
</script>
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!
jQuery animate() - using pre-defined values.
You can even specify a property's animation value as "show", "hide", or "toggle":
Click the button multiple times to toggle the animation.
<div>
<p class="text">Click the button multiple times to toggle the animation.</p>
<button id="b8">start animation</button>
<div id="div1d" style="background:#98bf21;height:8vw;
width:8vw;position:relative;"></div>
</div>
<script>
$(document).ready(function(){
$("#b8").click(function(){
$("#div1d").animate({
height: 'toggle'
});
});
});
</script>
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!
jQuery animate() - use queue functionality .
By default, jQuery comes with queue functionality for animations. This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE.
So, if you want to perform different animations after each other, you can take advantage of the queue functionality.
<div>
<button id="b9">start animation</button>
<div id="div1e" style="background:#98bf21;height:7vw;
width:7vw;position:relative;"></div>
</div>
<script>
$(document).ready(function(){
$("#b9").click(function(){
var div = $("#div1e");
div.animate({height: '40vw', opacity: '0.4'}, "slow");
div.animate({width: '30vw', opacity: '0.8'}, "slow");
div.animate({height: '10vw', opacity: '0.4'}, "slow");
div.animate({width: '10vw', opacity: '0.8'}, "slow");
});
});
</script>
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!
<div>
<button id="b10">Start Animation</button>
<div id="div1f" style="background:#98bf21;height:8vw;
width:16vw;position:relative;">HELLO</div>
</div>
<script>
$(document).ready(function(){
$("#b10").click(function(){
var div = $("#div1f");
div.animate({left: '20vw'}, "slow");
div.animate({fontSize: '3vw'}, "slow");
});
});
</script>
ThejQuery stop() method is used to stop animations or effects before they are finished. The stop() method works for all jQuery effect functions, including sliding, fading, and custom animations.
Syntax stop(): $(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.
The following example demonstrates the stop() method, with no parameters:
<div>
<button id="stop">Stop sliding</button>
<div id="flipA">Click to slide down panel</div>
<div id="panelA">Hello world!</div>
</div>
<script>
$(document).ready(function(){
$("#flipA").click(function(){
$("#panelA").slideDown(5000);
});
$("#stop").click(function(){
$("#panelA").stop();
});
});
</script>
A callback function is executed after the current effect is 100% finished. 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, which is executed after the current effect is finished.
Typical syntax: $(selector).hide(speed,callback);
The example below has a callback parameter that is a function that will be executed after the hide effect is completed.
This is a paragraph with little content.
<div>
<button id="bu">Hide</button>
<p id="par">This is a paragraph with little content.</p>
<p style="color: dodgerblue;" id="par_1"></p>
</div>
<script>
$(document).ready(function(){
$("#bu").click(function(){
$("#par").hide("slow", function(){
document.getElementById("par_1").textContent = "The paragraph is now hidden!";
});
});
});
</script>
The example below has no callback parameter, and the alert box will be displayed before the hide effect is completed.
This is a paragraph with little content.
<div>
<button id="bu1">Hide</button>
<p id="par1">This is a paragraph with little content.</p>
</div>
<script>
$(document).ready(function(){
$("#bu1").click(function(){
$("#par1").hide(1000);
alert("The paragraph is now hidden");
});
});
</script>
With jQuery, you can chain together actions/methods.
Chaining allows us to run multiple jQuery methods (on the same element) within a single statement. 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.
jQuery is fun!!
<div>
<p id="p11">jQuery is fun!!</p>
<button id="but">Click me</button>
</div>
<script>
$(document).ready(function(){
$("#but").click(function(){
$("#p11").css("color", "red").slideUp(2000).slideDown(2000);
});
});
</script>
When chaining, the line of code could become quite long. However, jQuery is not very strict on the syntax; you can format it like you want, including line breaks and indentations.
jQuery is fun!!
<div>
<p id="p12">jQuery is fun!!</p>
<button id="but1">Click me</button>
</div>
<script>
$(document).ready(function(){
$("#but1").click(function(){
$("#p12").css("color", "orange")
.slideUp(3000)
.slideDown(3000);
});
});
</script>