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


Kamlakar Singh added new Blog Convert Text Document to PDF File   10 days ago

Kamlakar Singh added new Article Introduction to Backbone.js   10 days ago

Kamlakar Singh added new Question Explain the AdRotator Control.   10 days ago

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