So I’ve been working on my next tutorial, A Gentle Introduction to CSS3 Animations, which I should be posting some time later today or tomorrow (EDIT: it’s out now), and I needed to find a way to run an animation when the user opens a specific slide. I should mention that I’m using this neat Webmaker tutorial template.
The solution is very simple:
$(document).on('click', '.next, .previous', function () {
switch ($(".current").text()){
case '2':
// Do something.
break;
case '3':
// Do something else.
break;
}
});
To see the full code, you can remix this template. I kept the modifications to the original template to a minimum and only used alerts to show an example of what you can do, but you can obviously do a lot more – animate elements, ask questions, show modals, etc. Once I publish my tutorial, I will have a much better example.
UPDATE: The way I used this myself was on my latest tutorial. Each time you open a slide #2, you will see the animation fade in (the element starts hidden, fades in when slide #2 is opened and then it hides again if you navigate to a different slide).