Home Asp.net How to Give jQuery fadeIn and fadeOut Effect to Text in Div?

How to Give jQuery fadeIn and fadeOut Effect to Text in Div?

524
0

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">&nbsp;</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

How to use fadein and fadeout effect using jquery in asp.net
How to use fadein and fadeout effect using jquery in asp.net

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!

Previous articleFacebook like box Overlapping and Positioning Issue
Next articleGet Selected Text Value from DropDownList in Asp.net using JavaScript
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

3 + sixteen =