From the course: jQuery: UI Widgets

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Animated behaviors

Animated behaviors - jQuery Tutorial

From the course: jQuery: UI Widgets

Start my 1-month free trial

Animated behaviors

jQuery UI extends the built-in animation capabilities of jQuery Core, pretty extensively. We're going to look at some of the ways that it does that in this movie. So here I have an image and a little box with a colour. The first thing that we'll look at is some built in effects,. The jQuery UI effects library takes some of the existing capabilities and packages them up in ways that are convenient to call in your code. So for example, there's a puff effect. Make the flowers go puff, and they disappear. It's basically just scaling, and fading them out, but it does it all at once, in one named function. Let's see what that looks like. going to jump down to the bottom of this file, scroll up a little bit, and here it is. I'm triggering this first on the click of this button, and then. I'm just calling the effect method on the selected image. The effect is called puff. I just call it by name with that string. And then I give it a duration, which is 300 milliseconds, in this case. So, it's…

Contents