jQuery effekter

  • Forrige side
  • Næste side

jQuery kan skabe skjulte, synlige, skiftende, glidende og tilpassede animationseffekter.

Prøv det selv

Prøv denne jQuery effekt:

CodeW3C.com - Førstepladsen inden for webteknologitutorials

På CodeW3C.com kan du finde alle de nødvendige webudviklingstutorials, du har brug for.

Klik her

Eksempel

jQuery hide()
Demonstration af den enkle jQuery hide() funktion.
jQuery hide()
En anden hide() demonstration. Hvordan man skjuler delvis tekst.
jQuery slideToggle()
Demonstration af den enkle slide panel effekt.
jQuery fadeTo()
Demonstration af den enkle jQuery fadeTo() funktion.
jQuery animate()
Demonstration af den enkle jQuery animate() funktion.

jQuery skjul og vis

Gennem hide() og show() funktioner understøtter jQuery skjulning og visning af HTML-elementer:

Eksempel

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

Prøv det selv

Begge hide() og show() kan have to valgfri parametre: velocity og callback.

Syntaks:

$.selector.hide(velocity, callback)
$.selector.show(velocity, callback)

speed Parametrene definerer hastigheden af visning eller skjulning. Disse værdier kan indstilles: "slow", "fast", "normal" eller millisekunder.

callback Parametrene er funktioner, der udføres efter at hide eller show funktioner er færdige. Du vil lære mere om dette i de følgende kapitler af denne vejledning callback Kendskab til parametrene.

Eksempel

$("button").click(function(){
$("p").hide(1000);
});

Prøv det selv

jQuery skift

jQuery toggle() funktion bruger show() eller hide() funktioner til at skifte synligheden af HTML-elementer.

Skjul synlige elementer og vis skjulte elementer.

Syntaks:

$.selector.toggle(velocity, callback)

speed Parametrene kan indstilles til disse værdier: "slow", "fast", "normal" eller millisekunder.

Eksempel

$("button").click(function(){
$("p").toggle();
});

Prøv det selv

callback Parametret er navnet på den funktion, der udføres efter afslutningen af denne funktion. Du vil lære mere om dette i de følgende kapitler af denne vejledning callback Kendskab til parametrene.

jQuery glidende funktioner - slideDown, slideUp, slideToggle

jQuery har følgende glidende funktioner:

$.selector.slideDown(velocity, callback)
$.selector.slideUp(velocity, callback)
$(selector).slideToggle(speed,callback)

speed Parametrene kan indstilles til disse værdier: "slow", "fast", "normal" eller millisekunder.

callback Parametret er navnet på den funktion, der udføres efter afslutningen af denne funktion. Du vil lære mere om dette i de følgende kapitler af denne vejledning callback Kendskab til parametrene.

slideDown() eksempel

$(".flip").click(function(){
$(".panel").slideDown();
});

Prøv det selv

slideUp() eksempel

$(".flip").click(function(){
$(".panel").slideUp();
});

Prøv det selv

slideToggle() eksempel

$(".flip").click(function(){
$(".panel").slideToggle();
});

Prøv det selv

jQuery Fade-funktioner - fadeIn(), fadeOut(), fadeTo()

jQuery har følgende fade-funktioner:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed Parametrene kan indstilles til disse værdier: "slow", "fast", "normal" eller millisekunder.

I fadeTo() funktionen opacity Parametret bestemmer den svækkelse til den angivne uigennemskinnelighed.

callback Parametret er navnet på den funktion, der udføres efter afslutningen af denne funktion. Du vil lære mere om dette i de følgende kapitler af denne vejledning callback Kendskab til parametrene.

fadeTo() eksempel

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

Prøv det selv

fadeOut() eksempel

$("button").click(function(){
$("div").fadeOut(4000);
});

Prøv det selv

jQuery brugerdefinerede animationer

Syntaksen for jQuery-funktioner til at oprette brugerdefinerede animationer:

$(selector).animate({params},[duration],[easing],[callback])

De vigtigste parametre er paramsDet definerer de CSS-ejenskaber, der anvendes til animation. Man kan indstille flere af disse egenskaber samtidig:

$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

Den anden parameter er durationDet definerer tiden anvendt på animation. Det indstillede værdi er: "slow", "fast", "normal" eller millisekunder.

Eksempel 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

Prøv det selv

Eksempel 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

Prøv det selv

HTML-elementer er som standard statisk placeret og kan ikke flyttes.

For at gøre elementer flytbare, skal du sætte CSS position til relative eller absolute.

jQuery Effekt - Fra denne side

Funktion Beskrivelse
$(selector).hide() Skjul valgte elementer
$(selector).show() Vis valgte elementer
$(selector).toggle() Skift (mellem skjult og synlig) valgte elementer
$(selector).slideDown() Rul ned (vis) valgte elementer
$(selector).slideUp() Rul op (skjul) valgte elementer
$(selector).slideToggle() Skift mellem op- og nedrulning af valgte elementer
$(selector).fadeIn() Fald ind i valgte elementer
$(selector).fadeOut() Fald ud af valgte elementer
$(selector).fadeTo() Fald ud af valgte elementer til den angivne uigennemskinnelighed
$(selector).animate() Udfør tilpassede animationer på valgte elementer

For et fuldt referencehåndbog, besøg vores jQuery Effekt Referencer.

  • Forrige side
  • Næste side