JQuery

How to animate image using jquery?

How to animate image using jquery?, someone asked me to explain?
By:

In this article we will discuss to animate image using method animate(). We can set numeric css properties width, height, padding, margin, etc. we can also specify duration using predefined string slow,fast,medium or time duration in milliseconds.

Example:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>simple jQueryAnimation Effects</title>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        button {
            width: 100px;
            height:50px;
            background: #00BCD4;
            border-style: solid; /* Required to animate border width */
            border-color:#808080;
            color:white;
        }
    </style>
    <script type="text/javascript">
       $(document).ready(function () {
            $("#btnAnimate").click(function () {
               $("img").animate({
                   width: "600px"
               });
            });
        });
</script>
</head>
<body style="border:1px solid #DED8D8;width:500px;">
    <h2 style="color:#00BCD4"> simple jQuery Animation Effects</h2>
    <button id="btnAnimate" type="button">animate</button>
    <p>
       <img src="http://www.infinetsoft.com/Images/logoinfi.png" alt="logo">
    </p>
</body>
</html> 

Output:

animate image using jquery

Related Article

Post your comments / questions



Recent Article