Die animate-metode in jQuery
Al die metodes wat ons in vorige lesse behandel het, is ietwat beperk – hulle doen presies waarvoor hulle geskep is. As jy meer beheer oor animasie nodig het, gebruik die universele metode animate.
Die eerste parameter van hierdie metode aanvaar 'n voorwerp waarin jy die nuwe waardes vir die CSS-eienskappe wat jy wil animeer, moet spesifiseer. En die tweede parameter is die tydsduur van die animasie.
Kom ons implementeer hierdie metode op die volgende HTML-kode:
<button id="button">click me</button>
<div id="elem">text...</div>
Laat die CSS so lyk:
#elem {
width: 150px;
height: 150px;
padding: 10px;
border: 1px solid green;
}
Kom ons maak dat, wanneer die knoppie gedruk word, die element saamtrek tot die volgende afmetings: hoogte – 50px, breedte – 100px:
$('#button').click(function() {
$('#elem').animate({height: 50, width: 100}, 1000);
});
As jy die waarde in hierdie formaat spesifiseer height: '+=50', sal die animasie so werk: die huidige hoogtewaarde sal vermeerder word met 50px (in ons geval) en die element sal glad na die nuwe waarde animeer. Kom ons kyk na 'n voorbeeld:
$('#button').click(function() {
$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});
Sien die jQuery-verwysing vir meer inligting oor die animate-metode.
Daar is so 'n opmaak:
<body>
<div id="block"></div>
</body>
div {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
margin-bottom: 20px;
}
Maak dat wanneer daar op die div met #block gedruk word, sy breedte vergroot na 200px oor 1100ms.
Gebruik die opmaak van die eerste taak. Maak dat by elke druk op die div met #block sy breedte vergroot met 200px en elke so 'n vergroting plaasvind oor 900px.
Gebruik die opmaak van die eerste taak. Maak dat by elke druk op die div met #block sy breedte en hoogte vergroot met 100px en elke so 'n vergroting plaasvind oor 950px.
Gebruik die opmaak van die eerste taak. Maak dat by elke druk op die div met #block, hy na regs beweeg met 100px en elke so 'n beweging plaasvind oor 700px.
