In my previous tutorials, I’d explained fadeIn and fadeOut effect using CSS3 transition, most popular fading effects, how to call javascript function from code-behind and other more cracking tutorials on Asp.net, JavaScript, jQuery here.
Now here in this tutorial, I’ll explain you how to give fadeIn and fadeOut effects to any of the html or asp.net controls using jQuery.
We can use fadein effect to show html elements using fadeIn() function and fadeout effect to hide html elements using fadeOut() function in jQuery.
Using jQuery fadeIn() Function Example
You need to use the following code snippet to implement fadeIn effect:
<script type="text/javascript"> //FadeIn Effect $('#btnFadeIn').click(function () { //3000 is a time duration(in ms) for transition $('#divFadeInOut').fadeIn(3000); return false; }); </script>
Using jQuery fadeOut() Function Example
You need to use the following code snippet to implement fadeOut effect:
<script type="text/javascript"> //FadeOut Effect $('#btnFadeOut').click(function () { //3000 is a time duration(in ms) for transition $('#divFadeInOut').fadeOut(3000); return false; }); </script>
Give jQuery fadeIn and fadeOut Effect to Text in Div [.aspx]
Following is the complete HTML Markup code snippet that I used for demonstration:
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>FadeIn and FadeOut effect using jquery in asp.net</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //FadeIn Effect $('#btnFadeIn').click(function () { //3000 is a time duration(in ms) for transition $('#divFadeInOut').fadeIn(3000); return false; }); //FadeOut Effect $('#btnFadeOut').click(function () { //3000 is a time duration(in ms) for transition $('#divFadeInOut').fadeOut(3000); return false; }); }); </script> </head> <body> <form id="form1" runat="server"> <table cellpadding="10"> <tr> <td colspan="3"> Note: First click on "Fade Me In!" and then "Fade Me Out!" to see effects </td> </tr> <tr> <td> <asp:Button ID="btnFadeIn" runat="server" Text="Fade Me In!" ClientIDMode="Static" /> </td> <td style="width: 30px;"></td> <td> <asp:Button ID="btnFadeOut" runat="server" Text="Fade Out!" ClientIDMode="Static" /> </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="3"> <div id="divFadeInOut" style="display: none; padding: 10px; width: 100%; color: #fff; background-color: #ff6600;"> Contents to FadeIn/FadeOut goes here<br /> Contents to FadeIn/FadeOut goes here<br /> Contents to FadeIn/FadeOut goes here<br /> Contents to FadeIn/FadeOut goes here<br /> Contents to FadeIn/FadeOut goes here<br /> Contents to FadeIn/FadeOut goes here<br /> Contents to FadeIn/FadeOut goes here<br /> </div> </td> </tr> </table> </form> </body> </html>
Example Result
Download Example
Git Repo
That’s it, this is one of the best way to give jquery fadeIn() or fadeOut() effect to any text in asp.net using javascript or jquery.
Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.
Happy Coding!