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)
 3565  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
















Recent Activities

jayprakash sharma Created New Discussion what is short circuit operator in java   16 hours ago

Sumit Kesarwani added new Question What is the Vector class in java?   2 days ago

Anchal Kesharwani added new Blog JSON Syntax   9 days ago

Anchal Kesharwani added new Article How to Send Mail in Node.JS   9 days ago

Top Contributors

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