jQuery-effekte - animasie


Met jQuery kan jy pasgemaakte animasies skep.



jQuery

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

Toets jouself met oefeninge

Oefening:

Gebruik die animate()metode om 'n <div>-element 250 pixels na regs te skuif.

$("div").animate({: ''});


jQuery Effekte Verwysing

Vir 'n volledige oorsig van alle jQuery-effekte, gaan asseblief na ons jQuery-effekverwysing .