---

Search posts under jQuery:

---

.animate() - Animate particular element in jQuery

How to animate a particular html element in jQuery?

To animate a particular html element we can use animate() method where we need to pass different css animation attributes separated by comma (,). In general animations are performed on only those CSS properties that are specified in numberic values, eg. width, height, font size etc.

<input type="button" value="Animate" id="btnAnimate" />

    <p id="pAnimate" style="background-color: Green;">
        Animate This
    </p>

<script>
    $("#btnAnimate").click(function () {
        $("#pAnimate").animate({
            width: "800px",
            fontSize: "60px",
            height: "500px"
        }, 500); // instead of 500, we can also keep "slow", "medium" or "fast"
    });
</script>

In the above code snippet, clicking button starts animating the width, font size and height properties of “pAnimate” (paragraph having id as "pAnimate") element after every 500 milliseconds in such a manner that the final width, font size and height of that element will be 800px, 60px and 500px respectively.

The last parameter value, in this case "500" specifies the speed of animation and its value is specified in milliseconds. We can also specifies the default value set for the speed in jQuery as "slow", "medium" and "fast".