jquery animate easing

Quick Reach

1 jquery animate easing
2 Example of using easing
3 Example of using jqueryui’s library
4 Related

As we seen in jquery animate() syntax, it used optional easing parameter. Easing Specifies transition with possible values of ‘swing’ and ‘linear’.

Linear moves animation at a constant speed from start to end.
Swing moves animation slower at the beginning and end while faster in middle.

Example of using easing

Experience this example online

<!DOCTYPE html>

<head>

<title>jQuery Animate</title>

$(document).ready(function() {

$(“#animate_button”).click(function() {

$(“.animate_spec”).animate({width: ‘500’},“slow”,“swing”);

$(“.animate_spec”).animate({height:‘300’},“slow”,“linear”);

});

</script>

.animate_spec {

background-color:#bbaa00;

width:270px;

height:150px;

}

</style>

</head>

<body>

<button id=“animate_button”>Animate for height and width with easing</button></button>

<div class=“animate_spec”>Example of animation for height and width with jquery animate() queue</div>

</body>

</html>

You can use jqueryui’s library for more easing effects. This is library that can be included:

<script src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js”></script>

Example of using jqueryui’s library