jQuery
Effects -
Show
/ Hide -
hide()
- Hide HTML elements
show()
- Show HTML elements
By
adding the optional parameters to the above functions we can make it
colorful.
Example
-
adding
the optional speed parameter. ( parameter values : “slow”,
“fast”, milliseconds )
Syntax
: $(selector).hide(speed,callback);
ex :
$("p").hide(3000);
$("p").show("slow");
The
optional callback
parameter is a function to be executed after the hide() or show()
method completes .
Toggle()
- This can use to toggle between hide() and show() methods.
For
this also we can add the callback optional parameters.
Syntax :
$(selector).toggle(speed,callback);
ex :
$("#toggleDiv").toggle();
$("#toggleDiv").toggle(1000);
Fading
-
With
jQuery can fade elements in and out of visibility.
fadeIn()
: The
jQuery fadeIn() method is used to fade in a hidden element.
$("#fadeinDiv").fadeIn();
$("#fadeinDiv2").fadeIn("slow");
$("#fadeinDiv3").fadeIn(2500);
fadeOut()
: The
jQuery fadeOut() method is used to fade out a visible element.
$("#fadeinDiv").fadeOut();
$("#fadeinDiv2").fadeOut("slow");
$("#fadeinDiv3").fadeOut(2500);
fadeToggle()
:
The jQuery fadeToggle() method
toggles between the fadeIn() and fadeOut() methods.
$("#fadeinDiv").fadeToggle();
$("#fadeinDiv2").fadeToggle("slow");
$("#fadeinDiv3").fadeToggle(2500);
fadeTo()
:
The jQuery fadeTo() method allows
fading to a given opacity (value between 0 and 1).
$("#fadeinDiv").fadeTo("slow",0.25);
$("#fadeinDiv2").fadeTo("slow",0.5);
$("#fadeinDiv3").fadeTo("slow",0.75);
Sliding
-
slideDown()
:
The jQuery slideDown() method is used to slide down an element.
$("#panel").slideDown("slow");
slideUp()
:
The jQuery slideUp() method is used to slide up an element.
$("#panel").slideUp("slow");
slideToggle()
:
The jQuery slideToggle() method is used to toggles between the
slideDown() and slideUp() an element.
$("#panel").slideToggle("slow");
Animation
-
Used
animate() to create custom animations in jQuery.
Syntax
:
$(selector).animate({params},speed,callback);
params
: required
params parameter defines the CSS properties to be animated.
speed
: optional
speed parameter specifies the duration of the effect. It can take the
following values: "slow", "fast", or
milliseconds.
callback
: optional
callback parameter is a function to be executed after the animation
completes.
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!
var
div=$("#animateabsoluteDiv");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({fontSize:'4em'},3000);
div.animate({fontSize:'1em'},3000);
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
Stop
-
The
jQuery stop() method is used to stop either an animation or an effect
before it is completed.
Syntax
: $(selector).stop(stopAll,goToEnd);
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.
Syntax
: $(selector).hide(speed,callback);
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("The
paragraph is now hidden");
});
});
});
Chaining
-
With
jQuery, you can chain together actions/methods.
Chaining
allows us to run multiple jQuery methods (on the same element) within
a single statement.
$("#animateabsoluteDiv").css("text-align","center").css("background-color","#e5eecc")
.css("color","green")
.slideUp(2000).slideDown(2000);
Full
example for jQuery Effects -
i)
relevant HTML
<!DOCTYPE
html PUBLIC
"-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<style
type="text/css">@IMPORT
url("css/jQuery03Efects.css");</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="JQueryJS/jQuery03Efects.js"></script>
</head>
<body>
<div
id="top">
<h2>jQuery
is a JavaScript Library.</h2>
<p>*
It is a lightweight.</p>
<p>*
jQuery also simplified the complicated things from the
JavaScript.</p>
</div>
<br>
<div
id="features">
<div
class="bluefont">jQuery
Library contains below features.</div>
<ul>
<li>------------------------------------</li>
<li> HTML
/ DOM manipulation</li>
<li> CSS
manipulation</li>
<li> HTML
event methods</li>
<li> Effects
and animations</li>
<li> Ajax</li>
<li>------------------------------------</li>
</ul>
</div>
<div
id="toggleDiv">
<p>The
jQuery syntax is tailor made for selecting HTML elements and
performing some action on the element(s).</p>
<p
class="bluefont">Basic
syntax is: $(selector).action()</p>
<br>
</div>
<div
id="fadeinDiv"
class="fadein">
<p>With
jQuery can fade elements in and out of visibility</p>
</div>
<div
id="fadeinDiv2"
class="fadein2">
<p>The
optional speed parameter specifies the duration of the effect.</p>
</div>
<div
id="fadeinDiv3"
class="fadein3">
<p>The
optional callback parameter is a function to be executed after the
fading completes.</p>
</div>
<br>
<div
id="flip">Click
to slide down panel</div>
<div
id="panel">Sanjeeva
Pathirana</div>
<br>
<div
style="height:310px;">
<div
class="animateabsolute"
id="animateabsoluteDiv"
align="left">
" Hello !!! " </div>
</div><br>
<button
id="hide">Hide</button>
<button
id="show">Show</button>
<button
id="toggle">Toggle</button>
<button
id="fadein">Fade
In</button>
<button
id="fadeout">Fade
Out</button>
<button
id="fadetoggle">Fade
Toggle</button>
<button
id="fadeto">Fade
To</button>
<button
id="animatestart">Start
Animation</button>
<button
id="animatestop">Stop
Animation</button>
<button
id="chain">Chaining</button>
</body>
</html>
ii)
relevant CSS
@CHARSET
"UTF-8";
body{
font-size:
12px;
font-family:
sans-serif;
}
.redfont{
font-size:
12px;
color:
red;
}
.bluefont{
font-size:
14px;
color:
blue;
font-weight:
bold;
}
.h1Gray{
font-size:
14px;
color:
gray;
}
.fadein{
width:450px;
height:30px;
display:none;
background-color:aqua;
}
.fadein2{
width:550px;
height:30px;
display:none;
background-color:lime;
}
.fadein3{
width:650px;
height:30px;
display:none;
background-color:olive;
}
#panel,#flip
{
padding:5px;
text-align:center;
width:400px;
background-color:#e5eecc;
border:solid
1px #c3c3c3;
}
#panel
{
padding:25px;
display:none;
}
.animateabsolute{
background:#98bf21;height:100px;width:100px;position:relative;
}
iii)
relevant jQuery js
$(function(){
$("button").dblclick(function(){
$("#top").hide(3000);
});
$("#show").click(function(){
$("#top").show("slow");
$("ul").addClass("redfont");
$(".h1Gray").hide();
$("ul
li:first").hide();
$("ul
li:last").hide();
});
$("#toggle").click(function(){
$("#toggleDiv").toggle();
});
$("#fadein").click(function(){
$("#fadeinDiv").fadeIn();
$("#fadeinDiv2").fadeIn("slow");
$("#fadeinDiv3").fadeIn(2500);
});
$("#fadeout").click(function(){
$("#fadeinDiv").fadeOut();
$("#fadeinDiv2").fadeOut("slow");
$("#fadeinDiv3").fadeOut(2500);
});
$("#fadetoggle").click(function(){
$("#fadeinDiv").fadeToggle();
$("#fadeinDiv2").fadeToggle("slow");
$("#fadeinDiv3").fadeToggle(2500);
});
$("#fadeto").click(function(){
$("#fadeinDiv").fadeTo("slow",0.15);
$("#fadeinDiv2").fadeTo("slow",0.4);
$("#fadeinDiv3").fadeTo("slow",0.7);
});
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
$("#flip").dblclick(function(){
$("#panel").slideUp("slow");
});
$("#animatestart").click(function(){
var
div=$("#animateabsoluteDiv");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({fontSize:'4em'},3000);
div.animate({fontSize:'1em'},3000);
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
$("#animatestop").click(function(){
$("#animateabsoluteDiv").stop();
});
$("#chain").click(function(){
$("#animateabsoluteDiv").css("text-align","center").css("background- color","#e5eecc").css("color","green").slideUp(2000).slideDown(2000);
});
});
Out Put as follows -
