How to create animations for your website using jQuery.animate()

The jQuery.animate() method includes extensive options for creating effects and ensures they are displayed seamlessly across various browsers. These advantages make the application popular with developers, who use it to add simple or complex animations to web pages.

What is the jQuery.animate() method?

JQuery.animate() is a function of the jQuery library that can create website animations. It affects the CSS properties of an HTML element such as the position, size, colour or transparency. In addition, it can be used effectively with other jQuery methods such as jQuery.find() or jQuery.on(). With the help of jQuery.css(), it is also possible to define the initial states of CSS properties, which then transition to certain target values through a smooth animation. Likewise, it is no problem to create CSS effects in a content management system through jQuery.animate(), as you can quickly and easily implement jQuery in WordPress, for example.

If you want to learn more about the basic concepts of jQuery, we recommend the jQuery tutorial in our guide.

This is the syntax of the jQuery.animate() method

The structure of jQuery.animate() is as follows:

$(selector).animate({properties}, duration, easing, complete);

• properties: is an object that contains the CSS properties and target formats for the animation.
• duration: specifies the duration of the animation in milliseconds
• easing: defines a transition function to adjust the gradient of the animation
• complete: is an optional callback function that is called after the animation is complete

What types of animations are possible?

The jQuery.animate() method has several options for controlling animations, including sequences, loops and easing functions.

Sequential animations

You can execute several animations in a row by calling the .animate() method several times in a row:

$("#myElement").animate({left: '250px'}).animate({top: '100px'});

The concatenation first moves the element 250 pixels to the right and then 100 pixels down.

Animation loops

You can also execute effects in loops by using a callback function to call the animation again:

function animateLoop() {
    $("#myElement").animate({left: '250px'}, 1000, function() {
        $("#myElement").animate({left: '0px'}, 1000, animateLoop);
    });
}
animateLoop();

The user-defined function animateLoop() moves the element 250 pixels to the right and then back again.

Easing functions

jQuery.animate() easing functions allow you to adjust the speed of the animation:

$("#myElement").animate({left: '250px'}, 1000, 'easeOutBounce');

In this example, when animating the element to move to the right, the ‘easeOutBounce’ easing function creates a bouncing effect.

Animations while scrolling

To trigger an animation while scrolling the website, you can use the jQuery.animate() on scroll event:

$(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    var elementPos = $("#myElement").offset().top;
    if (scrollPos > elementPos - 300) {
        $("#myElement").animate({
            backgroundColor: "#ff0000
            left: "0"
        }, 1000);
    }
});

Here the scroll event is connected to the window. Each time the window is scrolled, the function is activated. First, $(window).scrollTop() determines the current scroll position. Then the position of myElement is determined by $("#myElement").offset().top. If the scroll position is 300 pixels higher than the position of the element, jQuery.animate() will be called up. In this case, the background colour is set to #ff0000 (red) and the left position is set to 0. The animation lasts 1 second (1,000 milliseconds).