Home Asp.net jQuery fading Effects – fadeIn fadeOut fadeTo fadeToggle to DIV text

jQuery fading Effects – fadeIn fadeOut fadeTo fadeToggle to DIV text

31
0
jQuery fading Effects - fadeIn, fadeOut, fadeTo, fadeToggle to DIV text
jQuery fading Effects - fadeIn, fadeOut, fadeTo, fadeToggle to DIV text

In this tutorial, I’ll discuss most popular jQuery fading effects and how you can implement fadeIn, fadeOut, fadeTo, fadeToggle effects to a text inside div tag in asp.net with example code.

Just for refreshing, I had already explained how to give fadeIn and fadeOut effects using jQuery library, fadeIn and fadeOut effect using CSS3 transition, gridview inline insert update delete in my previous tutorials so you all can check it out! You can also find other tutorials on Asp.net, JavaScript, jQuery.

1. jQuery fadeIn Effect

The jQuery fadeIn() method is used to fade in a hidden html elements. In short, you can use this function when you want to show html elements with some transiton effects rather than just display/show a element without any effects. Following is the example of fadeIn() method:

$("#fadeInDIV").fadeIn("slow");
$("#fadeInDIV").fadeIn("fast");
$("#fadeInDIV").fadeIn(4000); //with 4sec delay

Here, The “slow”, “fast”, or “4000”(you can give any numbers in milliseconds) are optional speed parameters that specifies the duration of the effect.

2. jQuery fadeOut Effect

The jQuery fadeOut() method is used to fade out a visible html elements. In short, you can use this function when you want to hide html elements with some transitions effects rather than just hide a element without any effects. Following is the example of fadeOut() method:

$("#fadeOutDIV").fadeOut("slow");
$("#fadeOutDIV").fadeOut("fast");
$("#fadeOutDIV").fadeOut(4000); //with 4sec delay

Here, The “slow”, “fast”, or “4000”(you can give any numbers in milliseconds) are optional speed parameters that specifies the duration of the effect.

3. jQuery fadeTo Effect

The jQuery fadeTo() method allows you to give fading effect to a html element with specified opacity (opacity value valid range between 0 to 1). Following is the example of fadeTo() method:

$("#fadeToDIV").fadeTo("slow", 0.2);
$("#fadeToDIV").fadeTo("fast", 0.7);
$("#fadeToDIV").fadeTo(4000, 0.3); //with 4sec delay

Here, The “slow”, “fast”, or “4000”(you can give any numbers in milliseconds) are optional speed parameters that specifies the duration of the effect. Second parameter specifies the opacity value to a element and has a valid range between 0 to 1. Both are required parameters.

4. jQuery fadeToggle Effect

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. Following is the example of fadeToggle() method:

$("#fadeToggleDIV").fadeToggle("slow", 0.2);
$("#fadeToggleDIV").fadeToggle("fast", 0.7);
$("#fadeToggleDIV").fadeToggle(4000, 0.3); //with 4sec delay

Here, The “slow”, “fast”, or “4000”(you can give any numbers in milliseconds) are optional speed parameters that specify the duration of the effect.

jQuery fading Effects – fadeIn fadeOut fadeTo fadeToggle to DIV text

Now see the following complete HTML Markup code that I used for the demonstration to give jQuery fading effects – fadeIn fadeOut fadeTo fadeToggle to text inside html div tag:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery fadeIn fadeOut fadeToggle fadeTo effects to DIV text</title>
    <style type="text/css">
        .divFadeExamples {
            background: #e5e5e5;
            color: #222;
            padding: 5px;
            min-height: 50px;
        }
    </style>
    <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 examples
            $("#btnFadeInSlow").click(function () {
                $("#fadeInDIV").hide("fast"); //first reset div
                $("#fadeInDIV").fadeIn("slow"); //main code for "slow" fadeIn
                return false;
            });
            $("#btnFadeInFast").click(function () {
                $("#fadeInDIV").hide("fast"); //first reset div
                $("#fadeInDIV").fadeIn("fast"); //main code for "fast" fadeIn
                return false;
            });
            $("#btnFadeInMiliSec").click(function () {
                $("#fadeInDIV").hide("fast"); //first reset div
                $("#fadeInDIV").fadeIn(4000); //main code 4sec delay
                return false;
            });
            $("#btnFadeInText").click(function () {
                $("#fadeInDIV, #fadeInDIV > p").hide("fast"); //first reset div, text
                $("#fadeInDIV").show("fast"); //show div first
                $("#fadeInDIV > p").fadeIn(3000); //main code 3sec delay
                return false;
            });

            //fadeOut effect examples
            $("#btnFadeOutSlow").click(function () {
                $("#fadeOutDIV").show("fast"); //first reset div
                $("#fadeOutDIV").fadeOut("slow"); //main code for "slow" fadeOut
                return false;
            });
            $("#btnFadeOutFast").click(function () {
                $("#fadeOutDIV").show("fast"); //first reset div
                $("#fadeOutDIV").fadeOut("fast"); //main code for "fast" fadeOut
                return false;
            });
            $("#btnFadeOutMiliSec").click(function () {
                $("#fadeOutDIV").show("fast"); //first reset div
                $("#fadeOutDIV").fadeOut(4000); //main code 4sec delay
                return false;
            });
            $("#btnFadeOutText").click(function () {
                $("#fadeOutDIV, #fadeOutDIV > p").show("fast"); //first reset div, text
                $("#fadeOutDIV > p").fadeOut(3000); //main code 3sec delay
                return false;
            });

            //fadeToggle effect examples
            $("#btnFadeToggleSlow").click(function () {
                $("#fadeToggleDIV").fadeToggle("slow"); //main code for "slow" fadeOut
                return false;
            });
            $("#btnFadeToggleFast").click(function () {
                $("#fadeToggleDIV").fadeToggle("fast"); //main code for "fast" fadeOut
                return false;
            });
            $("#btnFadeToggleMiliSec").click(function () {
                $("#fadeToggleDIV").fadeToggle(4000); //main code 4sec delay
                return false;
            });
            $("#btnFadeToggleText").click(function () {
                $("#fadeToggleDIV, #fadeToggleDIV > p").show("fast"); //first reset div, text
                $("#fadeToggleDIV > p").fadeToggle(3000); //main code 3sec delay
                return false;
            });

            //fadeTo effect examples
            $("#btnFadeToSlow").click(function () {
                $("#fadeToDIV").fadeTo("fast", 1); //first reset div
                $("#fadeToDIV").fadeTo("slow", 0.2); //main code for "slow" fadeOut
                return false;
            });
            $("#btnFadeToFast").click(function () {
                $("#fadeToDIV").fadeTo("fast", 1); //first reset div
                $("#fadeToDIV").fadeTo("fast", 0.7); //main code for "fast" fadeOut
                return false;
            });
            $("#btnFadeToMiliSec").click(function () {
                $("#fadeToDIV").fadeTo("fast", 1); //first reset div
                $("#fadeToDIV").fadeTo(4000, 0.3); //main code 4sec delay
                return false;
            });
            $("#btnFadeToText").click(function () {
                $("#fadeToDIV, #fadeToDIV > p").fadeTo("fast", 1); //first reset div, text
                $("#fadeToDIV > p").fadeTo(3000, 0.6); //main code 3sec delay
                return false;
            });
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td colspan="4">
                    <b>jQuery fadeIn effect examples</b>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btnFadeInSlow">fadeIn Slow</button>
                </td>
                <td>
                    <button id="btnFadeInFast">fadeIn Fast</button>
                </td>
                <td>
                    <button id="btnFadeInMiliSec">fadeIn MiliSec</button>
                </td>
                <td>
                    <button id="btnFadeInText">fadeIn Text</button>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div id="fadeInDIV" class="divFadeExamples">
                        <p>some text here..</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <b>jQuery fadeOut effect examples</b>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btnFadeOutSlow">fadeOut Slow</button>
                </td>
                <td>
                    <button id="btnFadeOutFast">fadeOut Fast</button>
                </td>
                <td>
                    <button id="btnFadeOutMiliSec">fadeOut MiliSec</button>
                </td>
                <td>
                    <button id="btnFadeOutText">fadeOut Text</button>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div id="fadeOutDIV" class="divFadeExamples">
                        <p>some text here..</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <b>jQuery fadeToggle effect examples</b>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btnFadeToggleSlow">fadeToggle Slow</button>
                </td>
                <td>
                    <button id="btnFadeToggleFast">fadeToggle Fast</button>
                </td>
                <td>
                    <button id="btnFadeToggleMiliSec">fadeToggle MiliSec</button>
                </td>
                <td>
                    <button id="btnFadeToggleText">fadeToggle Text</button>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div id="fadeToggleDIV" class="divFadeExamples">
                        <p>some text here..</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <b>jQuery fadeTo effect examples</b>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btnFadeToSlow">fadeTo Slow</button>
                </td>
                <td>
                    <button id="btnFadeToFast">fadeTo Fast</button>
                </td>
                <td>
                    <button id="btnFadeToMiliSec">fadeTo MiliSec</button>
                </td>
                <td>
                    <button id="btnFadeToText">fadeTo Text</button>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div id="fadeToDIV" class="divFadeExamples">
                        <p>some text here..</p>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Example Result

jQuery fading Effects - fadeIn, fadeOut, fadeTo, fadeToggle to DIV text
jQuery fading Effects – fadeIn, fadeOut, fadeTo, fadeToggle to DIV text

Download Example Code

Git Repo

That’s it, by using this way you can apply jquery fading effects to any html element you want. You can choose the effects such as, fadeIn(), fadeOut(), fadeTo(), fadeToggle() event in jQuery using Asp.net web page.

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!

Previous articleRedirect Page on Button Click in Asp.net using JavaScript jQuery
Next articleEnable or Disable Asp.net TextBox on Button Click Event in jQuery
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

fifteen + ten =