jQuery-effecten
jQuery kan verborgen, getoond, omgeschakeld, glijdend en aangepaste animaties en andere effecten creëren.
Probeer het zelf uit
Probeer deze jQuery effect:
CodeW3C.com - De toonaangevende website voor Web-technologie handleidingen
Op CodeW3C.com kun je alle benodigde website bouwhandleidingen vinden.
Klik hier
Voorbeeld
- jQuery hide()
- Demonstreer de eenvoudige jQuery hide() functie.
- jQuery hide()
- Een andere hide() demonstratie. Hoe tekst gedeeltelijk te verbergen.
- jQuery slideToggle()
- Demonstreer het eenvoudige slide panel effect.
- jQuery fadeTo()
- Demonstreer de eenvoudige jQuery fadeTo() functie.
- jQuery animate()
- Demonstreer de eenvoudige jQuery animate() functie.
jQuery verbergen en tonen
Door de functies hide() en show() te gebruiken, ondersteunt jQuery het verbergen en tonen van HTML-elementen:
Voorbeeld
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Beide functies hide() en show() kunnen twee optionele parameters instellen: snelheid en callback.
Syntax:
$(selector).hide(snelheid, callback) $(selector).show(snelheid, callback)
snelheid De parameter bepaalt de snelheid van het weergeven of verbergen. Deze waarden kunnen worden ingesteld: "slow", "fast", "normal" of milliseconden.
terugroepfunctie De parameter is de naam van de functie die wordt uitgevoerd nadat hide of show functies zijn voltooid. Je zal in de volgende hoofdstukken van deze handleiding meer leren over terugroepfunctie Kennis van de parameters.
Voorbeeld
$("button").click(function(){
$("p").hide(1000);
});
jQuery wisselen
De jQuery toggle() functie gebruikt show() of hide() functies om de zichtbare status van HTML-elementen te wisselen.
Verberg zichtbare elementen en toon verborgen elementen.
Syntax:
$(selector).toggle(snelheid, callback)
snelheid De parameter kan de volgende waarden instellen: "slow", "fast", "normal" of milliseconden.
Voorbeeld
$("button").click(function(){
$("p").toggle();
});
terugroepfunctie De parameter is de naam van de functie die wordt uitgevoerd nadat deze functie is voltooid. Je zult in de volgende hoofdstukken van deze handleiding meer leren over terugroepfunctie Kennis van de parameters.
jQuery schuiffuncties - slideDown, slideUp, slideToggle
jQuery heeft de volgende schuiffuncties:
$(selector).slideDown(snelheid, callback) $(selector).slideUp(snelheid, callback) $(selector).slideToggle(snelheid,terugroepfunctie)
snelheid De parameter kan de volgende waarden instellen: "slow", "fast", "normal" of milliseconden.
terugroepfunctie De parameter is de naam van de functie die wordt uitgevoerd nadat deze functie is voltooid. Je zult in de volgende hoofdstukken van deze handleiding meer leren over terugroepfunctie Kennis van de parameters.
slideDown() voorbeeld
$(".flip").click(function(){
$(".panel").slideDown();
});
slideUp() voorbeeld
$(".flip").click(function(){
$(".panel").slideUp();
}
slideToggle() voorbeeld
$(".flip").click(function(){
$(".panel").slideToggle();
});
jQuery Fade-functies - fadeIn(), fadeOut(), fadeTo()
jQuery beschikt over de volgende fade-functies:
$(selector).fadeIn(snelheid,terugroepfunctie) $(selector).fadeOut(snelheid,terugroepfunctie) $(selector).fadeTo(snelheid,ondoorzichtigheid,terugroepfunctie)
snelheid De parameter kan de volgende waarden instellen: "slow", "fast", "normal" of milliseconden.
In de parameter van de fadeTo() functie ondoorzichtigheid De parameter bepaalt het verminderen tot de opgegeven ondoorzichtigheid.
terugroepfunctie De parameter is de naam van de functie die wordt uitgevoerd nadat deze functie is voltooid. Je zult in de volgende hoofdstukken van deze handleiding meer leren over terugroepfunctie Kennis van de parameters.
fadeTo() voorbeeld
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
fadeOut() voorbeeld
$("button").click(function(){
$("div").fadeOut(4000);
});
jQuery aangepaste animatie
De syntaxis van de jQuery-functie om een aangepaste animatie te maken:
$(selector).animate({params},[duur],[verlichting],[terugroepfunctie])
De cruciale parameter is paramsHet definieert de CSS-eigenschappen die worden gebruikt voor de animatie. Meerdere dergelijke eigenschappen kunnen tegelijkertijd worden ingesteld:
$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
De tweede parameter is duurHet definieert de tijd die wordt toegepast op de animatie. De ingestelde waarden zijn: "slow", "fast", "normal" of milliseconden.
Voorbeeld 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>
Voorbeeld 2
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
HTML-elementen zijn standaard statisch geplaatst en kunnen niet worden verplaatst.
Om elementen te kunnen verplaatsen, stel de CSS-position in op relative of absolute.
jQuery Effect - Van deze pagina
| Functie | Beschrijving |
|---|---|
| $(selector).hide() | Verberg het geselecteerde element |
| $(selector).show() | Toon het geselecteerde element |
| $(selector).toggle() | Schakel het geselecteerde element in en uit (van verbergen tot tonen) |
| $(selector).slideDown() | Scroll het geselecteerde element omlaag (tonen) |
| $(selector).slideUp() | Scroll het geselecteerde element omhoog (verbergen) |
| $(selector).slideToggle() | Schakel het geselecteerde element in en uit voor omhoog en omlaag scrollen |
| $(selector).fadeIn() | Blus het geselecteerde element in |
| $(selector).fadeOut() | Blus het geselecteerde element uit |
| $(selector).fadeTo() | Blus het geselecteerde element uit naar de opgegeven ondoorzichtigheid |
| $(selector).animate() | Voer een aangepaste animatie uit op het geselecteerde element |
Voor een volledig referentiemanual, bezoek onze jQuery Effect Referenties.
