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
- jQuery (cualquier versión)
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.