jQuery ci permette di combinare vari effetti per ottenere dei risultati molto interessanti. Il seguente plugin creato per questo articolo combina opacità e altezza per creare l'effetto finale di un elemento che mostra uno sliding verso l'alto e una dissolvenza. Vediamone insieme i dettagli.
Il codice jQuery, semplicissimo, è il seguente:
(function($) {
$.fn.slideFadeToggle = function(options) {
options = $.extend({
speed: 1000,
easing: 'swing',
callback: function() {}
}, options);
return this.animate({opacity: 'toggle', height: 'toggle'}, options.speed, options.easing, options.callback);
};
})(jQuery);
Il plugin ci permette di definire la velocità, l'algoritmo dell'animazione e una funzione di callback da invocare ad animazione completata. Viene sfruttato il valore toggle per l'altezza e l'opacità dell'elemento.
Ecco un esempio:
$(function() {
setTimeout(function() {
$('#test').slideFadeToggle();
}, 1500);
});
Potete visionare l'esempio di seguito.