# 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

# 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

# Slide

# Fade

# Delay

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

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

# 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>
 
        Copied!
    

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);
 
        Copied!