All posts by Thiyagu

Jquery

show() Effect in Jquery

Leave a comment

Description:

Jquery show() method used to display(make visible) matched element. The matched/selected elements will be show immediately, without any animation. If we apply duration, plain object or callback function then .show() becomes an animation method. It animates the height, width and opacity of the selected/matched elements simultaneously.

Syntax

.show(

[duration ] [easing ] [callback/complete ] )

Ex :

$("#div").show("slow", function() 
{ 
// Execute after Animation completed.
});
Duration/speed It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones.
Easing It specifies the easing function to be used for transition (default value: swing).
CallbackA function to call once the animation is complete.

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divflipBox").click(function () {
 $("#divpanelBox").show();
 });
 });
 </script>
 <style type="text/css">
 #divflipBox, #divpanelBox {
 background-color: #a0ce4e;
 border: solid 1px #c3c3c3;
 width: 25%;
 }
 #divpanelBox {
 padding: 30px;
 display:none;
 }
 </style>
</head>
<body>
 </br>
 <div id="divflipBox">
 Click to Show
 </div>
 <div id="divpanelBox">
 Hello Welcome to dotnet-helpers.com hide() example
 Learn MVC, ASP , JQuery with best examples. Thanks for visiting.
 </div>
</body>
</html>

Output:

After clicking the “Click to Show” button, the “divpanelBox” will show immediately without any animation.

Jquery

hide() Effect in Jquery

Leave a comment

Description:

Jquery hide() method used to hide the matched element. The matched/selected elements will be hide immediately, without no animation. If we apply duration, plain object or callback function then .hide() becomes an animation method. It animates the height, width and opacity of the selected/matched elements simultaneously.

Syntax

.hide(

[duration ] [easing ] [callback/complete ] )

Ex :

$("#div").hide("slow", function() 
{ 
// Execute after Animation completed.
});
Duration/speed It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones.
Easing It specifies the easing function to be used for transition (default value: swing).
CallbackA function to call once the animation is complete.

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divflipBox").click(function () {
 $("#divpanelBox").hide();
 });
 });
 </script>
 <style type="text/css">
 #divflipBox, #divpanelBox {
 background-color: #a0ce4e;
 border: solid 1px #c3c3c3;
 width: 25%;
 }
 #divpanelBox {
 padding: 30px;
 }
 </style>
</head>
<body>
 </br>
 <div id="divflipBox">
 Click to Hide
 </div>
 <div id="divpanelBox">
 Hello Welcome to dotnet-helpers.com hide() example
 Learn MVC, ASP , JQuery with best examples. Thanks for visiting.
 </div>
</body>
</html>

Output:

After clicking the “Click to Hide” button, the “divpanelBox” will hide immediately without any animation.

Jquery

.slideToggle() Effect in Jquery

Leave a comment

Description:

Jquery slideToggle() method display/hide the matched elements with a sliding motion. Alternatively, we can use slideToggle() method that perform both slide up and down animation  based up on the initial display. If initial displays state is in slide down then it will slide up the element or  if the selected element is slide up then it will slide down.

Syntax

.slideToggle(

[duration ] [easing ] [callback/complete ] )

Ex :

$("#div").slideToggle("slow", function() 
{ 
// Execute after Animation completed.
});
Duration/speed It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones.
Easing It specifies the easing function to be used for transition (default value: swing).
CallbackA function to call once the animation is complete.

Example:

From the below code, the selected (“divFadeBox”) will be slideUp and slideDown based up on their initial display. For example, if the selected element is hidden state then slideToggle will perform the slideUp else it will perform the slideDown animation .

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divflipBox").click(function () {
 $("#divpanelBox").slideToggle("slow");
 });
 });
 </script>
 <style type="text/css">
 #divflipBox, #divpanelBox {
 background-color: #a0ce4e;
 border: solid 1px #c3c3c3;
 width: 25%;
 }
 #divpanelBox {
 padding: 30px;
 }
 </style>
</head>
<body>
 <div id="divflipBox">
 Click to slideToggle
 </div>
 <div id="divpanelBox">
 Hello Welcome to dotnet-helpers.com slideToggle() example
 Learn MVC, ASP , JQuery with best examples. Thanks for visiting.
 </div>
</body>
</html>

Output:

Jquery

.slideUp() Effect in Jquery

Leave a comment

Description:

Jquery slideUp() method is used to slide UP the matched element with a sliding motion.

Syntax

.slideUp( duration, easing, complete/callback )

Ex :

$("#div").slideUp("slow", function() 
{ 
// Execute after Animation completed.
});
Duration/speed It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones.
Easing It specifies the easing function to be used for transition (default value: swing).
CallbackA function to call once the animation is complete.

Example:

From the below code, slideUp() method will slide UP the selected/matched element and finally “display:none” will append to the div to make it hidden. In other word, the .slideUp() method animates the height of the matched elements. Once the height reaches 0 then the “display” style property is set to “none”.

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divflipBox").click(function () {
 $("#divpanelBox").slideDown("slow");
 });
 });
 </script>
 <style type="text/css">
 #divflipBox, #divpanelBox{
 background-color:#a0ce4e;
 border:solid 1px #c3c3c3;
 width:25%;
 }
 #divpanelBox{
 padding: 30px; 
 display: none;
 }
 </style>
</head>
<body>
 <div id="divflipBox">
 Click to slide down</div>
 <div id="divpanelBox">
 Hello Welcome to dotnet-helpers.com
 Learn MVC, ASP , JQuery with best examples. Thanks for visiting.
 </div> 
</body>
</html>

Output:

After clicking the “Click to slide Up” button, then the “divpanelBox” will slideUp with animation. Finally “display:none” will append to the div to make it hidden.

Jquery

.slideDown() Effect in Jquery

Leave a comment

Description:

Jquery slideDown() method slide down the matched elements with a sliding motion.

Syntax

.slideDown( duration, easing, complete/callback )

Ex :

$("#div").slideDown("slow", function() 
{ 
// Animation complete.
});
Duration/speed It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones.
Easing It specifies the easing function to be used for transition (default value: swing).
CallbackA function to call once the animation is complete.

Example:

From the below code, slideDown() method will apply slide down to the selected element and apply “display:block” to the element. The .slideDown() method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items.

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divflipBox").click(function () {
 $("#divpanelBox").slideDown("slow");
 });
 });
 </script>
 <style type="text/css">
 #divflipBox, #divpanelBox{
 background-color:#a0ce4e;
 border:solid 1px #c3c3c3;
 width:25%;
 }
 #divpanelBox{
 padding: 30px; 
 display: none;
 }
 </style>
</head>
<body>
 <div id="divflipBox">
 Click to slide down</div>
 <div id="divpanelBox">
 Hello Welcome to dotnet-helpers.com
 Learn MVC, ASP , JQuery with best examples. Thanks for visiting.
 </div> 
</body>
</html>

Output:

After clicking the “Click to slide down” button, then the “divpanelBox” will slide down with animation. Finally “display:block” will append to the div to make it visible.

Jquery

fadeTo() Effect in Jquery

Leave a comment

Description:

jQuery fadeTo() method is used to fading the given opacity for the matched/selected element. It is similar to the .fadeIn method but that method unhides the element and always fades to 100% opacity.

Syntax

.fadeTo( duration, opacity

[, complete ] )

Ex : $(“#div”).fadeToggle(“slow”);

Duration/speed It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400). Duration are given in milliseconds and higher values indicate slower animations, not faster ones.
Easing It specifies the easing function to be used for transition (default value: swing).
CallbackA function to call once the animation is complete.

Example:

From the below code, fadeTo() method will apply opacity of 0.2 to the divFadeBox element. A number between 0 and 1 specifying the target opacity. 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divButton").click(function () {
 $("#divFadeBox").fadeTo("slow", 0.2);
 });
 });
 </script>
</head>
<body>
 <button id="divButton">Click to Apply Fadding using .fadeTo()</button><br><br>
 <div id="divFadeBox" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

Output:

After clicking the “Click to Apply Opacity using .fadeTo()” button, then the blue box will be fadein up to specified opacity (ie., 0.2) as shown below

Before button click:

<div id="divFadeBox" style="width: 80px; height: 80px; background-color: blue;"></div>

After button click:

<div id="divFadeBox" style="width: 80px; height: 80px; background-color: blue; opacity: 0.2;"></div>

 

Jquery

.fadeToggle() Effect in Jquery

Leave a comment

Description:

jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If the selected/matched elements are fadedIn then the fadeToggle will make them faded out. And if the selected elements are fadedOut then the fadeToggle will make them fadeIn.

Syntax

.fadeToggle(

[duration ] [, easing ] [, complete ] )

Ex : $(“#div”).fadeToggle(“slow”);

Duration/speed It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400)
Easing It specifies the easing function to be used for transition (default value: swing).
CallbackA function to call once the animation is complete.

Example:

From the below code, the “divFadeBox” been visible during the page load. After clicking “divButton”  the click event been triggered and the fadeToggle() will be executed and the box will be disappear. For more explanation see below output section

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#divButton").click(function () {
 $("#divFadeBox").fadeToggle();
 });
 });
 
 </script>
</head>
<body>
 </br>
 <button id="divButton">Click to fade Toggle boxes</button><br><br>
 <div id="divFadeBox" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

Output:

After clicking the “Click to fade Toggle boxes” button, then the blue box will be disappear if  it is in visible state else it will be appear if it is in hide like shown below.

Jquery

.fadeOut() Effect in Jquery

1 Comment

Description:

The fadeOut( ) method fades out all selected/matched elements by applying the opacity to 0, then setting display to “none” . Finally the optional callback will be triggered after completion of animation.

Syntax

.fadeOut(

[duration ] [easing] [callback] )

Ex : $(“#div”).fadeOut(“slow”);

Duration/speed It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400)
Easing It specifies the easing function to be used for transition (default value: swing).
CallbackA function to call once the animation is complete.

Example: Without Option(parameter)

From the below code, the “divFadeBox” been visible on the initial load. After clicking “divButton”  the click event been triggered and the fadeOut() will be executed on the “divFadeBox”. Finally “display:none” will be set to the matched element.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#divButton").click(function () {
$("#divFadeBox").fadeOut();
});
});
</script>
</head>
<body>
</br>
<button id="divButton">Click to fade in boxes</button><br><br>
<div id="divFadeBox" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

Output:

After clicking the “Click to fade Out boxes” button, then the blue box will be disappear as shown below.

<div id="divFadeBox" style="width: 80px; height: 80px; background-color: blue;"></div>

<div id="divFadeBox" style="width: 80px; height: 80px; display: none; background-color: blue;"></div>

Jquery

fadeIn() Effect in Jquery

Leave a comment

Description:

Display matched elements by fading them to opaque. In simple word, its animates the opacity for the matched elements.

Syntax

.fadeIn(

[duration ] [easing] [callback] )

$(“#div”).fadeIn(“slow”);

Duration/speed It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400)
Easing It specifies the easing function to be used for transition (default value: swing).
CallbackA function to call once the animation is complete.

Example: Without Option(parameter)

From the below code, the “divFadeBox” element has been set to display:none. So initially it will not visible during the page load. After clicking “divButton”, the fadeIn() will be executed to the “divFadeBox” element.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#divButton").click(function () {
$("#divFadeBox").fadeIn();
});
});
</script>
</head>
<body>
</br>
<button id="divButton">Click to fade in boxes</button><br><br>
<div id="divFadeBox" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

Output: 

After clicking “Click to fade in boxes” button, then the blue box will be fadeIn as shown below.

Example : With Option(parameter)

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#divButton").click(function () {
$('#divFadeBox').fadeIn(2000, 'swing', function () {
//Execute(callback) function after animation completed.
$("#divButton").attr('value', 'fadeIn() is now Complete');});
}); 
});
</script>
</head>
<body>
<input id="divButton" type="button" value="Click here to see fadeIn" /><br><br>
<div id="divFadeBox" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

Output

Before button click

After button click, it will be fade-in with duration of 2000 milli second & swing effect. After fade-in completed, callback method will be executed. Finally “fadein() is now complete” text will be append to the button button as shown below.

$(“#divButton”).attr(‘value’, ‘fadeIn() is now Complete‘);

 

Jquery

jQuery Effects

Leave a comment

jQuery framework provide more flexible way to add more effects on a web page by using in-build methods. jQuery effects can be categorized in to following ways

Short Idea About Jquery Effects:

jQuery Effects provide large number of methods for developing rich web application. Let we discuss about jQuery effect below.

MethodDescription
hide()hides the selected elements.
show()displays the selected elements.
toggle()shows or hides the matched elements.
fadein()Display the matched elements by fading them to opaque.
fadeout()Hide the matched elements by fading them to transparent.
fadeto()Adjust the opacity of the matched elements.
fadetoggle()shows/hides the selected element. ie., toggles between the fadeIn() and fadeOut().
slidedown()shows the matched elements with sliding motion.
slidetoggle()shows or hides the matched elements with slide. ie., it is used to toggle between the slideUp() and slideDown().
slideup()hides the matched elements with sliding motion.
animate()performs animation for the selected element.
clearQueue()It is used to remove all remaining queued functions from the selected elements.
delay()sets delay execution for all the queued functions on the selected elements.
dequeue()It is used to remove the next function from the queue, and then execute the function.
finish()It stops, removes and complete all queued animation for the selected elements.
queue()Show or manipulate the queue of functions to be executed on the matched elements.
stop()stops the animation on the selected elements.

 

Let us discuss more about effect one by one detailed way in up-coming posts.