JavaScript + jQuery effects · JavaScript

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 or transition 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');
});

Videos & tutorials

JavaScript + jQuery effects ➔