Snippet: añadir una clase a un elemento de forma temporal con jQuery

06 Oct 2016

Objetivo

Tenemos un elemento en nuestra página web al que queremos aplicar una clase solo de forma temporal. Pasado el tiempo indicado, la clase se elimina automáticamente. Opcionalmente, podemos disparar un callback cuando la clase se ha eliminado.

Cuándo puede ser útil

  • Queremos cambiar temporalmente un elemento de una página con una clase que tiene asociada una CSS especial (un borde o un color diferente).
  • Queremos llamar la atención del usuario iluminando alguna sección de una aplicación solo temporalmente.
  • Queremos deshabilitar algún elemento durante un tiempo concreto. Al pasar ese tiempo, queremos avisar al usuario.

Soporte y dependencias

El código

/*
 * addTempClass
 * jQuery plugin for add a class to an element for a custom time.
 * Support callbacks when class is removed.
 *
 * @param   {string}    className   The class to add
 * @param   {number}    expire      Time in miliseconds before remove the new class
 * @param   {function}  callback    The function invoked after remove the class
 * @return  void
 *
 * Ej.: $( 'body' ).addTempClass( 'myClass', 2000, function () { console.log( 'tada!') } );
 */
( function ( $ ) {
    'use strict';
    $.fn.addTempClass = function ( className, expire, callback ) {
        className || ( className = '' );
        expire || ( expire = 1500 );
        return this.each( function () {
            $( this ).addClass( className ).delay( expire ).queue( function () {
                $( this ).removeClass( className ).clearQueue();
                callback && callback();
            } );
        } );
    };
} ( jQuery ) );

Ejemplo de uso

// Simple
$( '#myProfile' ).addTempClass( 'highlight', 2000 );
 
// With callback
$( '#myProfile' ).addTempClass( 'highlight', 2000, function () {
    // URL Redirect
    window.location.assign( '/' );
} );
Más:

Aún no tenemos debug!
Ningún marciano se ha comunicado.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *