jquery sa essere sbalorditivo anche senza l’utilizzo di plugin. Qualche post fa ho mostrato un plugin per ottenere l’effetto pulse. Un effetto simile si può ottenere anche solo con l’utilizzo di funzioni base come fadeTo ed un setTimeout, anzi … sfruttando gli effetti presenti in jquery (e senza l’uso di plugin) si possono fare tante cose davvero interessanti.
Vorrei davvero elencarli tutti, e mostrare un esempio davvero completo su questa parte del mio framework preferito (eheheh non ne ho ancora guardati altri).
Andiamo per cose più o meno necessarie:
- modificare l’opacità di un elemento;
- far sparire o scomparire un elemento;
- animare un elemento;
Non è tutto quello che si può fare i con jquery effects ma è senz’altro molto. E’ ovvio che se vogliamo nascondere un elemento con jqery dobbiamo usare $(…).hide(); Eheheh più conosco la libreria più rimango sorpreso. $(…).show(); invece mostrerà l’elemento. C’è un effetto decisamente interessante: fade. Possiamo lanciare fadeIn per mostrare, fadeOut per nascondere … un elemento. Lo vedremo scomparire. Come al solito possiamo impostare l’attributo speed per indicare la velocità. fadeTo poi, è l’effetto che preferisco perchè ci permette di non mostrare o nascondere completamente un elemento, ma di impostare la sua opacità. $(…).fadeTo(“slow”,0.5);
Immaginate di avere una pagina piena di contenuto tanto da far perdere la testa a chi ci sta navigando. Possiamo opacizzare per qualche secondo l’intero sito, esclusa la parte che ci interessa.
Tra tutti gli effetti che jquery ci mette a disposizione, quello senz’altro più maestoso è .animate(). Infatti, se passiamo ad animate un array con gli stili che vogliamo modificare, e successicamente la durata dell’animazione, potremo ottenere degli effetti decisamente grafici e spettacolari.
Tanto per fare un esempio, immaginiamo di volere un effetto che sposta il menu dal top al bottom della nostra pagina web:
$(…).css({‘position’:'absolute’});
$(…).animate({‘width’:’90%’,'height’:’30px’,'bottom’:’0px’,'margin’:'auto’,'align’:'center’},2000);
Purtroppo, per ragioni che ignoro (forse un bug)animate non mi ha consentito di impostare position. Così ho dovuto farlo a mano. Bene, questo semplice esempio altro non fa che reimpostare alcune proprietà del css di un elemento. Per farlo impiega 2000 millisecondi. Modifica l’allineamento, cambia le dimensioni… Sono tute cose che avranno un movimento decisamente fluido. Se sommiamo questo al fatto che non ci sarà bisogno di plugin, e sopratutto non avremo bisogno di preoccuparci di quale browser avrà il nostro utente… beh… darei un altro 10+ a jquery =).
