How to create an­im­a­tions for your website using jQuery.animate()

The jQuery.animate() method includes extensive options for creating effects and ensures they are displayed seam­lessly across various browsers. These ad­vant­ages make the ap­plic­a­tion popular with de­velopers, who use it to add simple or complex an­im­a­tions to web pages.

What is the jQuery.animate() method?

JQuery.animate() is a function of the jQuery library that can create website an­im­a­tions. It affects the CSS prop­er­ties of an HTML element such as the position, size, colour or trans­par­ency. In addition, it can be used ef­fect­ively 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 prop­er­ties, which then trans­ition to certain target values through a smooth animation. Likewise, it is no problem to create CSS effects in a content man­age­ment 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);

• prop­er­ties: is an object that contains the CSS prop­er­ties and target formats for the animation.
• duration: specifies the duration of the animation in mil­li­seconds
• easing: defines a trans­ition 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 an­im­a­tions are possible?

The jQuery.animate() method has several options for con­trolling an­im­a­tions, including sequences, loops and easing functions.

Se­quen­tial an­im­a­tions

You can execute several an­im­a­tions in a row by calling the .animate() method several times in a row:

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

The con­cat­en­a­tion 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 an­im­ate­Loop() 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 ‘easeOut­Bounce’ easing function creates a bouncing effect.

An­im­a­tions 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() de­term­ines the current scroll position. Then the position of myElement is de­term­ined 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 back­ground colour is set to #ff0000 (red) and the left position is set to 0. The animation lasts 1 second (1,000 mil­li­seconds).