Un dels punts forts de jQuery és la facilitat amb què es poden assolir certs efectes que, programats d’altra manera amb Javascript, ens portarien unes quantes línies més de codi.
Per exemple, el .animate() ens permet animar les propietats CSS d’una etiqueta HTML (capa, llista, enllaç). La podem cridar amb un “handler” (gestor d’esdeveniments) com el .hover(). Així doncs, imaginem que tenim una capa que volem que quan l’usuari es posa a sobre amb el ratolí, disminueixi la opacitat a un 40%. El codi quedaria de la següent manera aplicant un .animate() a seques:
$(document).ready(function(){
$("#foo").hover(function(){
// Això s'executa quan l'usuari entra amb el ratolí dins la nostra capa
$(this).animate({opacity:0.4});
}, function(){
// Això s'executa quan l'usuari treu el ratolí de sobre la nostra capa
$(this).animate({opacity:1});
});
});
Si ho proveu en viu aquí http://jsfiddle.net/adriia/9yw2Y/ comprovareu que, si entreu i sortiu amb el ratolí molt ràpid de dins l’enllaç, un cop pareu no deixa de fer les animacions. Això és perquè cada cop que entreu i sortiu amb el ratolí l’animació que genereu es posa a la cua, i un cop pareu totes les animacions que heu generat i que no li ha donat temps de processar les va executant a poc a poc. Aquest no és el comportament que esperem. L’ideal seria que si entrem i sortim molt ràpidament, l’animació es parés i executés el que li està dient l’usuari.
Algú va pensar en això, per sort, i podem fer servir el .stop() en aquests casos. Aquesta sentència el que fa és parar l’animació de l’objecte actual, estigui on estigui, i esborrar la cua d’animacions que tingui. A la funció stop() li hem de passar dos paràmetres que per defecte sempre seran true i true.
$(document).ready(function(){
$("#foo").hover(function(){
// Això s'executa quan l'usuari entra amb el ratolí dins la nostra capa
$(this).stop(true,true).animate({opacity:0.4});
}, function(){
// Això s'executa quan l'usuari treu el ratolí de sobre la nostra capa
$(this).stop(true,true).animate({opacity:1});
});
});
Així doncs, el funcionament aquí és més normal http://jsfiddle.net/adriia/4WxHt/
Per a més informació sobre el .animate() i .stop() podeu consultar la documentació oficial de jQuery: