Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery text fadein fadeout fadeto Effects div Example in Asp.net

Oct 6, 2012
Introduction

Here I will explain how to implement simple div with fadein fadeout, fadeto effects using
JQuery in asp.net.

Description:
  
In previous posts I explained
Draggable and Resizable example, split the string, add fade in effect to page, Password strength jquery plugin examples and many articles relating to JQuery. Now I will explain how implement simple div with fadein fadeout, fadeto effects in JQuery.

To implement fadein fadeout, fadeto effects div in JavaScript we need to write much code but in JQuery we can achieve this functionality just by simple properties fadein, fadeout and fadeto that would be like as shown below


<script type="text/javascript">
$(document).ready(function() {
$('#fadeindiv').fadeIn('slow');
$('#fadeoutdiv').fadeOut('slow');
$('#fadetodiv').fadeTo('slow', 0.2);
});
</script>
OR


<script type="text/javascript">
$(document).ready(function() {
$('#fadeindiv').fadeIn(2000);
$('#fadeoutdiv').fadeOut(2000); 
$('#fadetodiv').fadeTo(2000,0.2);
});
</script>
If you observe above script I used one div with fadeIn, Second div with fadeout and another div with fadeTo properties.

fadein():  This method display the matched elements with fade in effect

fadeOut(): This method hide the matched elements with fade out or transparent effect

fadeTo(): This method fades the matched elements with opacity. In this we can set the opacity between 0 and 1 (If you observe above fadeTo method I mentioned 0.2)

If you want check this code in sample check below code

Example:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery fadein fadeout and fadeTo effects for div example</title>
<style type="text/css">
.fadediv{
width: 150px; height: 50px; padding: 0.5em;background:#EB5E00;color:#fff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

</head>
<body>
<form id="form1" runat="server">
<h2> jQuery fadeIn, fadeOut and fadeTo effects for div Example</h2>

<table>
<tr>
<td>
<div id="fadeindiv" class="fadediv">
<b>Click me - fadeIn()</b>
</div>
</td>
<td>

<div id="fadetodiv"  class="fadediv">
<b>Click me - fadeTo()</b>
</div>
</td>
<td>

<div id="fadeoutdiv"  class="fadediv">
<b>Click me - fadeOut()</b>
</div>
</td>
</tr>
<tr>
<td colspan="3"><button id="btnReset">Reset</button></td>
</tr>
</table>

<script type="text/javascript">
// Applying fadein effect
$("#fadeindiv").click(function() {
$(this).hide().fadeIn('slow');
});
// Applying fadeout effect
$("#fadeoutdiv").click(function() {
$(this).fadeOut('slow');
});
// Applying fadeto effect
$("#fadetodiv").click(function() {
$(this).fadeTo('slow', 0.2);
});
// Reset the div's
$('#btnReset').click(function() {
$('#fadeindiv').fadeIn('slow');
$("#fadeoutdiv").fadeIn('slow');
$("#fadetodiv").fadeIn('slow');
})
</script>
</form>
</body>
</html>

Live Demo

To check Live demo click on below div’s

jQuery fadeIn, fadeOut and fadeTo effects for div Example

Click me - fadeIn()
Click me - fadeTo()
Click me - fadeOut()

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

2 comments :

Unknown said...

nice post

Unknown said...

Dear Sir How can we do automatically fadeout div for certain time and again come in. just like www.jobkunja.com.... can u please explain me that

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.