JQuery

How can set multiple css properties for animation at a time?

How can set multiple css properties for animation at a time?, someone asked me to explain?
By:

We can set multiple css properties for animate() method in jquery. We can cause the changes in a property to take place over a period of time with changes take effect immediatly.

 Example:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Animationwith multiple properties</title>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        button {
            width: 100px;
            height: 50px;
            background: #43BCF3;
            border-style: solid;
            border-color: #00BCD4;
            color: white;
        }
    </style>
    <script type="text/javascript">
       $(document).ready(function () {
            $("#btnAnimate").click(function () {
               $("img").animate({
                   width: "300px",
                   height: "90px",
                   marginLeft: "150px",
                   borderWidth: "10px",
                   opacity: 0.5
               });
            });
        });
    </script>
</head>
<body style="border: 1px solid #DED8D8; width: 500px;">
    <h2 style="color: #00BCD4">jQuery Animation with multiple properties</h2>
    <button id="btnAnimate" type="button">animate</button>
    <p>
        <img src="http://www.infinetsoft.com/Images/logoinfi.png" alt="logo">
    </p>
</body>
</html> 

Output:

jQuery Animation with multiple properties

Related Article

Post your comments / questions



Recent Article