Jquery effect methods are used for creating the animated graphics in web application
Jquery library contains so many methods for this functionality like
1. Hide
2.Show
3. Toggle
4. Slide
5. Fade
6. Animate
7. Stop etc.
Now let see the example of Hide and show method
>> show is used for showing the contains of element.
>> Hide is used for hiding the contains of element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Scripts/jquery.min.js"></script>
<script>
$(function () {
$("#hide").click(function () {
$("p").hide(1000);
});
$("#show").click(function () {
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>This is the test message. </p><br />
<button id="hide">Hide Me</button>
<button id="show">Show Me</button>
</body>
</html>
Note: Here 1000 is the speed of show method. It is optional.
Jquery has the following fading method
a. FadeIn()
b. fadeOut()
c. fadeToggle()
d. fadeTo()
FadeIn() Example
>> It is used for displaying the contains of any element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Scripts/jquery.min.js"></script>
<script>
$(function () {
$("#show").click(function () {
$("#p1").fadeIn();
$("#p2").fadeIn("slow");
$("#p3").fadeIn(4000);
});
});
</script>
</head>
<body>
<p id="p1" style="display:none;background-color:green;height:50px;">This is the test message. </p>
<p id="p2" style="display:none;background-color:silver;height:50px;">This is the test message. </p>
<p id="p3" style="display:none;background-color:blue;height:50px;">This is the test message. </p>
<button id="show">Click Here</button>
</body>
</html>
Note: FadeIn() method conatins also speed parameter which specifies the durartion of effect.
Fade out
>> It is used for hiding the contains with some animated effect.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Scripts/jquery.min.js"></script>
<script>
$(function () {
$("#Fade").click(function () {
$("#p1").fadeOut();
$("#p2").fadeOut("slow");
$("#p3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p id="p1" style="background-color:green;height:50px;">This is the test message. </p>
<p id="p2" style="background-color:silver;height:50px;">This is the test message. </p>
<p id="p3" style="background-color:blue;height:50px;">This is the test message. </p>
<button id="Fade">Click Here</button>
</body>
</html>
fadeTo()
>> This method is used for managing the opacity of current element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Scripts/jquery.min.js"></script>
<script>
$(function () {
$("#Fade").click(function () {
$("#p3").fadeTo("slow",0.10);
});
});
</script>
</head>
<body>
<p id="p3" style="background-color:blue;height:50px;">This is the test message. </p>
<button id="Fade">Click Here</button>
</body>
</html>
Animate Method
Animate method is used for doing animation in user interface.
Stop Method
It is used to stop the animation in Jquery library.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--<script src="../../Scripts/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$("#animate").click(function () {
$("div").animate({left:'350px'},5000);
});
$("#stop").click(function () {
$("div").stop();
});
});
</script>
</head>
<body>
<button id="animate">Animate Me</button>
<button id="stop">Stop Me</button>
<br />
<div style="height:100px;width:100px;background-color:red; position:absolute; left:20px;">
Try to animate me.
</div>
</body>
</html>
Summary:
We have learnt the basic concept of effect method of Jquery Library.
Chandradev's Blog 
One thought on “Effect methods in Jquery Library (Part 5)”