Home > DeveloperSection > Articles > JQuery fadeTo method

JQuery fadeTo method

Posted by  Sachindra Singh
on    February-22-2011 14:24 PM

JQuery JQuery 
Ratings:
0 Comment(s)
 3839  View(s)
Rate this:

JQuery fadeTo method

In JQuery fadeTo () method used to fade element on page. In this article I am trying to show you, how we can implement fadeTo method on the page. For example I have two images on page and I want to images fade from page to given opacity.

Syntax: $(“target”).fadeTo (Time duration, Opacity);

Time duration=Pass time duration in string (“fast or medium or slow”)

Opacity=Opacity should be between 0 and 1.

Code:

  <script type="text/javascript" src="jquery.min.js">

 

    <script type="text/javascript">

        $(document).ready(function        {

            $("button").click(function            {

                $("img").fadeTo("medium", 0.15); //img will fade by using fadeTo function given time duration and opacity

            });

        });

    </script>

 

</head>

<body>

    <h2>

        Jquery fadeTo method</h2>

    <table width="300">

        <tr>

            <td>

                <img src="Desert.jpg" width="200" height="100" />

            </td>

            <td>

                <img src="Jellyfish.jpg" width="200" height="100" >            </td>

        </tr>

        <tr>

            <td align="center" colspan="2">

                <button>

                    Click to fade</button>

            </td>

        </tr>

    </table>

</body>

 

Screenshot

JQuery fadeTo method

When I will click on button image will be start to fade from page as shown below:

Screenshot

JQuery fadeTo method
















Don't want to miss updates? Please click the below button!