jQuery-effekter

  • Föregående sida
  • Nästa sida

jQuery kan skapa dolda, synliga, växlingar, glidningar och anpassade animationer och andra effekter.

Prova själv

Prova denna jQuery-effekt:

CodeW3C.com - Ledande webbtekniktutorialwebbplats

På CodeW3C.com kan du hitta alla de webbplatsbyggnadstutorialer du behöver.

Klicka här

Exempel

jQuery hide()
Demonstration av den enkla jQuery hide() funktionen.
jQuery hide()
En annan hide() demonstration. Hur man döljer del av texten.
jQuery slideToggle()
Demonstration av den enkla slide panel effekten.
jQuery fadeTo()
Demonstration av den enkla jQuery fadeTo() funktionen.
jQuery animate()
Demonstration av den enkla jQuery animate() funktionen.

jQuery dölja och visa

Genom att använda funktionerna hide() och show() stöder jQuery att dölja och visa HTML-element:

Exempel

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

Prova själv

Både hide() och show() kan ha två valfria parametrar: speed och callback.

Syntaks:

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

$(selector).fadeTo(speed,opacity,callback) Parametrarna specificerar hastigheten för att visa eller dölja. Dessa värden kan ställas in: "slow", "fast", "normal" eller i millisekunder.

callback Parametrarna är namnet på funktionen som körs efter att hide eller show funktionen har slutförts. Du kommer att lära dig mer om detta i de följande kapitlen i denna tutorial. callback Kunskap om parametrar.

Exempel

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

Prova själv

jQuery växling

jQuery toggle() funktionen använder show() eller hide() funktioner för att växla synlig status för HTML-element.

Dölj visade element och visa dolda element.

Syntaks:

$(selector).toggle(hastighet, callback)

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

Exempel

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

Prova själv

callback Parametern är namnet på den funktion som körs efter att denna funktion har slutförts. Du kommer att lära dig mer om detta i de följande kapitlen i denna guide callback Kunskap om parametrar.

jQuery rullgardinsfunktioner - slideDown, slideUp, slideToggle

jQuery har följande rullgardinsfunktioner:

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

$(selector).fadeTo(speed,opacity,callback) $(selector).slideToggle(speed,callback)

callback Parametern är namnet på den funktion som körs efter att denna funktion har slutförts. Du kommer att lära dig mer om detta i de följande kapitlen i denna guide callback Kunskap om parametrar.

Parametrarna kan ställas in till följande värden: "slow", "fast", "normal" eller millisekunder.

slideToggle() exempel
slideDown() exempel
});

Prova själv

$(".panel").slideDown();

slideToggle() exempel
slideUp() exempel
$(".panel").slideUp();

Prova själv

}

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

Prova själv

$(".panel").slideToggle();

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

jQuery har följande fade-funktioner:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)

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

I fadeTo() funktionen kan parametern ställas in till följande värden: "slow", "fast", "normal" eller millisekunder. opacity Parametern specificerar att minska till den angivna ogenomskinligheten.

callback Parametern är namnet på den funktion som körs efter att denna funktion har slutförts. Du kommer att lära dig mer om detta i de följande kapitlen i denna guide callback Kunskap om parametrar.

fadeTo() exempel

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

Prova själv

fadeOut() exempel

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

Prova själv

jQuery anpassade animationer

Syntaksen för jQuery-funktionen för att skapa anpassade animationer:

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

De viktiga parametrarna är paramsDet definierar de CSS-attribut som används för att skapa animation. Det är möjligt att ställa in flera sådana attribut samtidigt:

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

Den andra parametern är durationDet definierar tiden som används för animation. Det värde som sätts är: "slow", "fast", "normal" eller millisekunder.

Exempel 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>

Prova själv

Exempel 2

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

Prova själv

HTML-element är som standard statiskt placerade och kan inte flyttas.

För att elementet ska kunna flyttas, sätt CSS position till relative eller absolute.

jQuery effekt - från denna sida

Funktion Beskrivning
$(selector).hide() Döljer valda element
$(selector).show() Visar valda element
$(selector).toggle() Växla (döljer/visar) valda element
$(selector).slideDown() Rullar ner (visar) valda element
$(selector).slideUp() Rullar upp (döljer) valda element
$(selector).slideToggle() Växla mellan upp- och nedrullning på valda element
$(selector).fadeIn() Tonar in valda element
$(selector).fadeOut() Tonar ut valda element
$(selector).fadeTo() Tonar ut valda element till angiven opacitet
$(selector).animate() Utför anpassade animationer på valda element

För en fullständig referenshandbok, besök vår jQuery Effekt referenshandbok。

  • Föregående sida
  • Nästa sida