How to create effects using jQuery

Creating the effects to your webpage is easy by using jQuery effects. Now let us see the some simple jQuery effects

1. jQuery Hide and Show

hide()- To hide your HTML elements

show()- To show the hidden elements

Optional-you can also the add the optional parameters speed and callback for hide() and show()

SYNTAX:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speed – Specifies the speed of the element on hide/ show. It will take the values as slow, fast or in milliseconds or seconds

callback – Specifies the name of the function to be called after the hide/show function

EXAMPLE:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#hide").click(function(){
 $("p").hide(500);   //speed - 500 is optional
 });
 $("#show").click(function(){
 $("p").show(500);    //speed - 500 is optional
 });
});
</script>
</head>
<body>
<p>Welcome to learnwebdevelopment</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

2. jQuery Toggle

Toggle() toggles between hide() and show()

Here also you can specify the parameters speed and callback

SYNTAX:

$(selector).toggle(speed,callback)

EXAMPLE:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(500);   //speed 500 is optional
});
});
</script>
</head>
<body>
<button>click me toggle</button>
<p>Welcome to Learnwebdevelopment</p>
</body>
</html>

3. jQuery Slide

slide() to make the transition for an elements. slide() are slideDown(), slideUp, slideToggle

SYNTAX:

$(selector).slideUp(speed,callback)

$(selector).slideDown(speed,callback)

$(selector).slideToggle(speed,callback)

EXAMPLE:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#up").click(function(){
 $("p").slideUp();
 });
$("#down").click(function(){
 $("p").slideDown();
 });
$("#toogle").click(function(){
 $("p").slideToggle();
 });
});
</script>
</head>
<body>
<p>
To slide Upwards click SlideUp<br>
To slide Downwards click SlideDown<br>
To toggle Up and Down click Toggle<br>
</p>
<button id="up">SlideUp</button>
<button id="down">SlideDown</button>
<button id="toogle">Toggle</button>
</body>
</html>

4. jQuery Fade

fade()  gradually change the opacity for selected elements.

Fade Methods are:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

EXAMPLE:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
});
</script>
</head>
<body>
<div style="background:blue;width:300px;height:50px;color:white;">
Hai! Welcome to Learnwebdevelopment.info
</div>
<button>Click to Fade</button>
</body>
</html>

5. jQuery Animate()

animate() to make the custom animation for the elements

SYNTAX:

$(selector).animate({params},[duration],[easing],[callback])

EXAMPLE:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
 $("div").animate({height:200},"slow");
 $("div").animate({height:100},"slow");
 });
});
</script>
</head>
<body>
<button>Animate</button>
<div style="background:red;height:100px;width:100px;position:relative">
Welcome to Learn web development
</div>
</body>
</html>

Note:

1. The speed parameter can take the following values: “slow”, “fast”, “normal”, or milliseconds.

2. The opacity parameter in the fadeTo() method allows fading to a given opacity.

3. The callback parameter is the name of a function to be executed after the function completes.

Lets see about callback in the next chapter

Posted in jQuery Tagged with: