Skip to content

Instantly share code, notes, and snippets.

@neodigm
Last active December 7, 2018 21:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neodigm/b3c734223981f83549a36f25c955e34f to your computer and use it in GitHub Desktop.
Save neodigm/b3c734223981f83549a36f25c955e34f to your computer and use it in GitHub Desktop.
Vanilla JavaScript Blink Class
// Add and Remove a class repeatedly for a set duration for a set number of times (blinking or animating).
// This is good for blinking an element for a few seconds to attract attention to it.
var fBlinkClass = function( _sQuery, _sClass, _nItra, _nDura ){
var eChevr = document.querySelector( _sQuery ), _nCur = 0, _si;
eChevr.classList.add( _sClass );
_si = window.setInterval(function(){
if( ++_nCur <= _nItra ){
if( eChevr.classList.contains( _sClass ) ){
eChevr.classList.remove( _sClass );
}else{
eChevr.classList.add( _sClass );
}
}else{
eChevr.classList.remove( _sClass );
window.clearInterval( _si );
}
}, _nDura);
}
// Usage
fBlinkClass( "#js-dropdown-0--id svg", "drop-surface__svg--red", 8, 460 );
@neodigm
Copy link
Author

neodigm commented Nov 30, 2018

This is good for calling attention to an element. For example a required field on a passively validated form (hover of CTA).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment