JavaScript + jQuery effects
JS doesn’t do effects—CSS does
- All the effects we see are created by CSS
- JavaScript has no concept of animations—it’s all CSS
- We trigger CSS into action with JS
Trigger with classes
- JavaScript will add a class to an element
- The class will have associated CSS
- That
animation
ortransition
will be triggered
HTML
<div></div>
CSS div {
background-color: darkred;
transition: all .5s linear;
}
.is-clicked {
background-color: orange;
}
JavaScript $('div').on('click', function (e) {
$(this).toggleClass('is-clicked');
});
CSS
div {
height: 200px;
width: 200px;
}
.is-clicked {
animation: spin 1s ease;
}
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
JavaScript $('div').on('click', function (e) {
$(this).addClass('is-clicked');
});
Events
Animations & transitions dispatch events that our JS can respond to:
animationstart
,animationiteration
,animationend
transitionend
JavaScript
$('div').on('click', function (e) {
$(this).addClass('is-clicked');
});
$('div').on('animationend', function (e) {
$(this).removeClass('is-clicked');
});
Let’s no forget SVG!
Treat it the same as any other HTML—just add classes, transitions & animations
HTML
<svg viewBox="0 0 200 200" width="200" height="200">
<circle fill="midnightblue" cx="100" cy="100" r="90" />
</svg>
CSS circle {
transition: all 1s ease;
}
.is-clicked {
fill: purple;
}
JavaScript $('svg').on('click', function (e) {
$('circle').toggleClass('is-clicked');
});