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:
speed: la velocità dell'effettopulses: il numero di volte in cui l'elemento deve pulsarefadeLow: il valore di opacità di partenzafadeHigh: il valore di opacità finale
Esempio:
$(function() {
$('#run').click(function() {
$('#test').pulse();
});
});
Potete visionare l'esempio finale in questa pagina.