jQuery: far pulsare gli elementi

jQuery possiede il metodo fadeTo() che permette di regolare l'opacità di un elemento fissando un limite. Possiamo sfruttare questo metodo per creare l'effetto degli elementi che pulsano utilizzando un plugin di nostra creazione. Vediamo come.

Il codice del plugin è il seguente:

(function($) {

	$.fn.pulse = function(options) {
	
		var that = this;
		
		var defaults = {
		
			speed: 'slow',
  			pulses: 2,
  			fadeLow: 0.2,
  			fadeHigh: 1
		
		};
		
		options = $.extend(defaults, options);
		
		return that.each(function() {
		
    		for(var i = 0; i < options.pulses; i++) {
    		
      			$(this).fadeTo(options.speed, options.fadeLow).fadeTo(options.speed, options.fadeHigh);
    		}

    
    		$(this).fadeTo(options.speed, 1);
    		
  		});

	
	};

})(jQuery);

Il plugin accetta le seguenti opzioni:

1. speed: la velocità dell'effetto
2. pulses: il numero di volte in cui l'elemento deve pulsare
3. fadeLow: il valore di opacità di partenza
4. fadeHigh: il valore di opacità finale

Esempio:

$(function() {

	$('#run').click(function() {
	
		$('#test').pulse();
	
	});

});

Potete visionare l'esempio finale in questa pagina.