Animation (effects)

• Animations can be created with either pure CSS or with JavaScript, but each has its pros and cons:
  • Use CSS transitions and keyframe animations for small, self-contained states of UI elements
    • Examples: a button hover animation, showing a tooltip, sliding in a navigation menu, ...
  • Use JavaScript animations for complex animations and rich interactivity
    • Examples: event based animations (stop-pause-reverse animations on click events), complex sequences of timeline animations, ...
• Vanilla JavaScript has a built-in Web Animations API (opens new window) that is well-supported in all modern browsers
  (Note: we haven't discussed this API in this course)
• jQuery also has some built-in methods (e.g. animate() (opens new window)) for simple to advanced animations

REMARKS

• jQuery's animations are slow compared to CSS animations and the Web Animation API
• When speed is (really) important, we recommend the GSAP Animation Platform (opens new window)

Effects

• In this section we only discuss the basic built-in animations (so-called effects) with jQuery
• The first (optional) parameter of all these effects corresponds to the duration of the effect in ms or by using the words fast (= 200ms) or slow (= 600ms)
  • The default duration for every effect (except for show/hide/toggle) is 400ms
• The last (optional) parameter of all these effects is a callback function that runs once the effect is completed
• Open jQuery/effects/effects.html and look at the behavior of some basic effects

Show/hide

effect	description
<element>.show() (opens new window)	show the matched <element>
<element>.hide() (opens new window)	hide the matched <element>
<element>.toggle() (opens new window)	show/hide the matched <element>

Slide

effect	description
<element>.slideUp() (opens new window)	show the matched <element> with a sliding motion
<element>.slideDown() (opens new window)	hide the matched <element> with a sliding motion
<element>.slideToggle() (opens new window)	show/hide the matched <element> with a sliding motion

Fade

effect	description
<element>.fadeIn() (opens new window)	show the matched <element> by fading it's opacity to 100% (opaque)
<element>.fadeOut() (opens new window)	hide the matched <element> by fading it's opacity to 0% (transparant)
<element>.fadeToggle() (opens new window)	show/hide the matched <element> by fading it's opacity
<element>.fadeTo() (opens new window)	adjust the opacity of the matched element

Delay

• Thedelay() method allows us to delay the execution of functions that follow it in the queue, e.g.

$('div').slideUp().delay(500).slideDown()

Example

Slideshow

• Open jquery/effects/slideshow.html (opens new window) and jquery/effects/slideshow.js
• Every 4 seconds, a new, random image is placed inside the figure tag
  • hide the figure tag with a slideUp effect
  • empty the figure tag
  • append the new random image to the figure tag
  • wait 500ms, so the image can be loaded in the background
  • show the figure tag with a slideDown effect

<div class="border-gray">
    <figure>
        <img src="https://picsum.photos/id/151/600/400" alt="image 151" />
    </figure>
</div>

const idMin = 151;
const idMax = 180;
let currentImg = 151;

function loop() {
    let nextImg = currentImg;
    // the next image is a random image between idMin and idMax but may not be the same as the current image
    do {
        nextImg = Math.floor(Math.random() * (idMax - idMin + 1) + idMin);
    } while (nextImg === currentImg);
    currentImg = nextImg;
    // figure slideUp() -> replace the image -> wait 500ms -> slideDown()
    $('figure').slideUp(1000, function () {
        $(this)
            .empty()
            .append(`<img src="https://picsum.photos/id/${currentImg}/600/400" alt="image ${currentImg}">`)
            .delay(500)
            .slideDown(1000);
    });
}

loop();
setInterval(loop, 4000);

READING TIP

• Effects (animations)@jQuery API (opens new window)