Efectes

Són métodes pensats per afegir de manera fàcil i ràpida les animacions més comunes al nostre projecte. Són molt fàcils de fer servir!

A W3Schools trobareu un llistat d’efectes força complet, i la documentació oficial evidentment també és molt bona.

Exemples:

• • • En fer click a un botó, que s’amagui un text
    • En passar pel damunt d’un quadrat, fer que li canvii la opacitat
    • Canviar el tamany d’una div

Sintaxis bàsica

$(“selector”).efecte(velocitat, callback);

hide( ), show( ) i toggle( )

Tots tres funcionen de forma similar.

hide( ) 

amaga un element

show( ) 

ens el mostra si estava amagat

toggle( ) 

amaga un element i permet tornar-lo a mostrar

A tots tres podem afegir un parell de paràmetres, que ens permetran ajustar la forma en que es farà l’animació.

La forma básica es la següent: seleccionem un element, i li diem que s’amagui. Ho farà inmediatament, sense cap transició.

$(“p”).hide( );

Per variar el temps que trigará en desaparéixer, podem fer-ho amb el paràmetre velocitat. Simplement afegirem que volem que ho faci lentament (slow), ràpid (fast), o indicarem els milisegons que ha de durar la transició (número)

$(“p”).hide(slow);

$(“p”).hide(fast);

$(“p”).hide(1000);

El paràmetre callback ens permet cridar a una funció que s’executarà quan s’acabi la animació.

fadeIn( ), fadeOut( ), fadeToggle( ), fadeTo( )

Els quatre efectes tenen en comú que afecten als elements mitjançant un esvaniment més o menys gradual de la seva visibilitat (un “fading“).

Els tres primers admeten els paràmetres opcionals que hem vist amb el grup anterior: velocitat i callback. L’últim, fadeTo, és una mica diferent. Li hem de dir la velocitat, i a més a més li hem d’afegir un parámetre que controla la opacitat (de 0 a 1). Per últim, li podriem afegir el callback

fadeOut( ) 

per amagar un element

fadeIn( ) 

per donar-li visibilitat a un element

fadeToggle( ) 

permet passar de visible a invisible, mitjançant l’esvaniment

fadeTo( ) 

permet passar a una opacitat específica, p.ex:

$(“#div1”).fadeTo(“slow”, 0.15);

slideDown( ), slideUp( ), slideToggle( )

Tenen el mateix funcionament que tots els anteriors, el que canvia és l’efecte, que en aquest cas es un lliscament. Paràmetres: velocitat i callback.

slideDown( )

Llisca cap a la part inferior

slideUp( )

Llisca cap a la part superior

slideToggle( )

Llisca en direccions alternes 

animate

Sintaxi: 

$(selector).animate({parametres}, velocitat,callback);

Ens dóna un control força més acurat de l’animació, podent fer-la al nostre gust. Podem canviar l’amplada, l’alçada, la opacitat, la posició desde el marge superior o esquerre… Exceptuant el color, ho podem canviar tot, el padding, el margin, el tamany, la posició, però totes aquelles propietats que utilitzin guionets, s’hauran de canviar a codificació camelCase, per exemple, marginRight en lloc de margin-right. Aquests paràmetres els posarem entre { }, i podem utilitzar més d’un, tot separant amb coma “,”. També ho podeu fer en vàries linies per tal de facilitar la lectura del codi.

Per últim, assenyalar que també admet els paràmetres que ja hem vist, velocitat i callback

$(“div”).animate({left: ‘250px’},”fast”);

$(“#capaRoja”)
.animate({height:”800px”},500);

$(“div”).animate({

    left: ‘250px’,

    opacity: ‘0.5’,

    height: ‘150px’,

    width: ‘150px’

},”slow”);

$(“div”).animate({left: ‘250px’, opacity: ‘0.5’, height: ‘150px’, width: ‘150px’},”slow”);

2. Operacions amb HTML i CSS

Amb jQuery tenim la possibilitat d’accedir i canviar l’html, tant elements com atributs. Ho fem mitjançant l’arbre DOM (Document Object Model), un estàndard del W3C que defineix com poden accedir i actualitzar programes i scripts al contingut, estructura i estil d’un document. És el que permet obtenir, canviar, afegir o eliminar elements HTML.

Per consultar una referéncia completa de métodes jQuery per manipular HTML i CSS, cliqueu aquí.

Recuperar/establir contingut HTML

Per recuperar un contingut html, o canviar-lo, els métodes més comuns són:

text( ) 

Estableix o retorna el contingut de text dels elements seleccionats

Retornar contingut: 

$(“selector”).text( );

Establir contingut: 

$(“selector”).text(“Hola Món!”);

html( ) 

Estableix o retorna el contingut d’elements seleccionats (incloent el format HTML)

Retornar contingut: 

$(“selector”).html( );

Establir contingut: 

$(“selector”).html(“Hola Món!”);

val( ) 

Estableix o retorna el valor dels camps del formulari

Retornar contingut: 

$(“selector”).val( );

Establir contingut: 

$(“selector”).val(“Hola Món!”);

attr( ) 

Estableix o retorna valors d’atribut. Aquest métode el veurem amb més profunditat en el següent apartat

Retornar contingut: 

$(“#w3s”).attr(“href”);

Establir contingut: 

$(“#w3s”).attr(“href”, “https://www.w3schools.com/jquery”);

Modificant el value

$(“#txt”).val(“value canviat”);

alert($(“#txt”).val( ));

Afegir contingut HTML

Per afegir contingut html:

append( ) 

Afegir contingut al final dels elements seleccionats

Sintaxi: 

$(“selector”).append(“Text afegit”);

prepend( ) 

Afegir contingut al principi dels elements seleccionats

Sintaxi: 

$(“selector”).prepend(“Text afegit”);

after( ) 

Afegir contingut després dels elements seleccionats

Sintaxi: 

$(“selector”).after(“Text afegit”);

before( ) 

Afegir contingut abans dels elements seleccionats

Sintaxi: 

$(“selector”).before(“Text afegit”);

Eliminar contingut HTML

Per eliminar contingut html:

remove( ) 

Elimina l’element html i el seu contingut (els elements “childs”)

Sintaxi: 

$(“#div1”).remove( );

empty( ) 

Buida l’element html, eliminant el seu contingut (els elements “childs”)

Sintaxi: 

$(“#div1″).empty( );

Manipulant el CSS: classes CSS

Afegir, eliminar i alternar classes CSS

addClass( ) 

Afegir classes als elements seleccionats

Sintaxi: 

$(“selector”).addClass(“classe”);

Sintaxi: 

$(“selector, selector”).addClass(“classe classe classe”);

removeClass( ) 

Eliminar classes dels elements seleccionats

Sintaxi: 

$(“selector, selector”)
.removeClass(“classe classe”);

toggleClass( ) 

Alterna entre afegir/eliminar classes dels elements seleccionats

Sintaxi: 

$(“selector, selector”).toggleClass(“classe classe”);

Manipulant el CSS: css( )

Permet recuperar i manipular propietats CSS dels elements seleccionats

css( )

Per recuperar el valor d’una propietat, tenint en compte que retorna el valor del primer element que troba.

Sintaxi: 

$(“selector”).css(“propietat”);

Per establir el valor d’una sola propietat CSS.

Sintaxi: 

$(“selector”)
.css(“propietat”,”valor”);

Per establir el valor de vàries propietats CSS.

Sintaxi: 

$(“selector”).css({“propietat”: “valor”, “propietat”: “valor”});

Exemple: 

$(“div”).css({“background-color”: “cyan”, “font-size”: “1.5em”});

Canviem l’estil d’un element: 

$(“#elemento”)
.css(“color”,”#ff0000″);

Apliquem diferents modificadors a un mateix element:

$(“div”).css(“background”, “blue”).css(“width”,”200px”).css(“height”, “400px”);

$(“div”).css({“background” : “blue”, “width” : “200px” });