jQuery Show Popup on Page Load

6 Sep 2013

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

No comments:

Post a Comment