jQuery-effekte - animasie
Met jQuery kan jy pasgemaakte animasies skep.
jQuery Animasies - Die animeer() metode
Die jQuery animate()
-metode word gebruik om persoonlike animasies te skep.
Sintaksis:
$(selector).animate({params},speed,callback);
Die vereiste parameters parameter definieer die CSS eienskappe wat geanimeer moet word.
Die opsionele spoedparameter spesifiseer die duur van die effek. Dit kan die volgende waardes neem: "stadig", "vinnig" of millisekondes.
Die opsionele terugbelparameter is 'n funksie wat uitgevoer moet word nadat die animasie voltooi is.
Die volgende voorbeeld demonstreer 'n eenvoudige gebruik van die animate()
metode; dit skuif 'n <div>-element na regs totdat dit 'n linkereienskap van 250px bereik het:
Voorbeeld
$("button").click(function(){
$("div").animate({left: '250px'});
});
By verstek het alle HTML-elemente 'n statiese posisie, en kan nie geskuif word nie.
Om die posisie te manipuleer, onthou om eers die CSS-posisie-eienskap van die element op relatief, vas of absoluut te stel!
jQuery animate() - Manipuleer veelvuldige eienskappe
Let daarop dat verskeie eienskappe gelyktydig geanimeer kan word:
Voorbeeld
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Is dit moontlik om ALLE CSS eienskappe te manipuleer met die animate() metode?
Ja, amper! Daar is egter een belangrike ding om te onthou: alle eiendomname moet kameel-omhulsels wees wanneer dit gebruik word met die animate() metode: Jy sal paddingLeft moet skryf in plaas van padding-left, marginRight in plaas van margin-right, ensovoorts.
Kleuranimasie is ook nie by die kern jQuery-biblioteek ingesluit nie.
As jy kleur wil animeer, moet jy die
Color Animations-inprop van jQuery.com aflaai.
jQuery animate() - Gebruik relatiewe waardes
Dit is ook moontlik om relatiewe waardes te definieer (die waarde is dan relatief tot die element se huidige waarde). Dit word gedoen deur += of -= voor die waarde te plaas:
Voorbeeld
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - Gebruik vooraf gedefinieerde waardes
Jy kan selfs 'n eiendom se animasiewaarde as " show
", " hide
" of " toggle
" spesifiseer:
Voorbeeld
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - Gebruik tou-funksionaliteit
By verstek kom jQuery met tou-funksionaliteit vir animasies.
Dit beteken dat as jy veelvuldige animate()
oproepe na mekaar skryf, jQuery 'n "interne" tou skep met hierdie metode-oproepe. Dan loop dit die animasie-oproepe EEN vir EEN.
Dus, as u verskillende animasies na mekaar wil uitvoer, maak ons gebruik van die tou-funksionaliteit:
Voorbeeld 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Die voorbeeld hieronder skuif eers die <div>
element na regs, en vergroot dan die lettergrootte van die teks:
Voorbeeld 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
jQuery Oefeninge
jQuery Effekte Verwysing
Vir 'n volledige oorsig van alle jQuery-effekte, gaan asseblief na ons jQuery-effekverwysing .