På denna sida beskrivs man kan dölja eller visa element med olika effekter, eller animeringar. Metoder nedan kan användas för att dölja eller visa element, men även ändra elements position.
För att göra sidor mer tilltalande kan man animera visande och döljande av element.
I detta avsnitt beskrivs metoder för att dölja/visa element med effekter, t.ex. genom att gradvis dölja ett element.
| Metod | Element som väljs ut |
|---|---|
.animate(egenskaper[, tid][, funk1][, complete]) |
Utför en anpassad animering av egenskaper av element |
.clearQueue([namn]) |
Rensar animeringskö, och ev. endast den med namn som i argumentet namn |
.delay(intervall[, namn]) |
Ange antal millisekunder som nästa jobb i animeringskö ska fördröjas |
.dequeue([namn]) |
Utför nästa jobb i animeringskö, och ev. endast från den med namn som i argumentet namn |
.fadeIn([tid][, funk1][, funk2]) |
Animerar objekt från dolt till fullt synligt |
.fadeOut([tid][, funk1][, funk2]) |
Animerar objekt från fullt synligt till dolt |
.fadeTo(tid, intensitet[, funk1][, funk2]) |
Animerar objekt från fullt synligt/dolt till intensitet |
.fadeToggle([tid,] [funk1,] [funk2] ) |
Animerar objekt från fullt synligt eller dolt till dolt resp. fullt synligt, beroende på om element är synligt eller dolt |
.queue(...) |
Manipulera animeringskö (behandlas inte här) |
.show([tid,] [funk1,] [funk2] ) |
Animerar objekt från dolt till fullt synligt |
.slideDown([tid][, funk1][, funk2]) |
Animerar objekt från dolt till synligt genom att öka dess höjd |
.slideToggle([tid][, funk1][, funk2]) |
Animerar objekt från synligt eller dolt till dolt eller synligt genom att minska resp. öka dess höjd, beroende på om element är synligt eller dolt |
.slideUp([tid][, funk1][, funk2]) |
Animerar objekt från synligt till dolt genom att minska dess höjd |
.stop([rensa][, fullfolj]) |
Avsluta nuvarande animering, och ev. rensa kö om argumentet rensa sant och avsluta animering omedelbart om argumentet fullfolj sant |
.toggle([tid][, funk1][, funk2]) |
Dölj eller visa element, beroende på om element är synligt eller dolt |
Detta exempel visar på hur man kan dölja och sen visa element när något klickas på (eng. toggle). Först väljs div-tagg ut med hjälp av dess id codefadein, sen dess förfader som är fieldset, för att koppla funktion till dess klickhändelse. I klickhändelse kopplas animeringsmetoden slideToggle() till div-taggen.
$("#codefadein").parents("fieldset").click(function(){
$("#codefadein").slideToggle("slow");
});
Till början på sida
Nedan finns några böcker och webbsidor/-platser som jag använt för att skapa denna underwebb.