De animate methode in jQuery
Alle methoden die we in eerdere lessen hebben besproken, zijn enigszins beperkt - ze doen precies waarvoor ze zijn gemaakt. Als je meer controle over de animatie nodig hebt, gebruik dan de universele methode animate.
Als eerste parameter accepteert deze methode een object waarin je de nieuwe waarden van de CSS-eigenschappen die je wilt animeren, moet instellen. En als tweede parameter - de uitvoeringstijd van de animatie.
Laten we deze methode implementeren op de volgende HTML-code:
<button id="button">click me</button>
<div id="elem">text...</div>
Laat de CSS er als volgt uitzien:
#elem {
width: 150px;
height: 150px;
padding: 10px;
border: 1px solid green;
}
Laten we ervoor zorgen dat bij het klikken op de knop het element krimpt naar de volgende afmetingen: hoogte - 50px, breedte - 100px:
$('#button').click(function() {
$('#elem').animate({height: 50, width: 100}, 1000);
});
Als je de waarde in dit formaat opgeeft height: '+=50', dan werkt de animatie als volgt: bij de huidige hoogtewaarde wordt 50px opgeteld (in ons geval) en het element wordt soepel geanimeerd naar de nieuwe waarde. Laten we ernaar kijken aan de hand van een voorbeeld:
$('#button').click(function() {
$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});
Voor meer details over de animate methode, zie de jQuery handleiding.
Er is deze opmaak:
<body>
<div id="block"></div>
</body>
div {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
margin-bottom: 20px;
}
Zorg ervoor dat bij het klikken op de div met #block de breedte toeneemt tot 200px in 1100ms.
Gebruik de opmaak uit de eerste taak. Zorg ervoor dat bij elke klik op de div met #block de breedte toeneemt met 200px en elke such toename plaatsvindt in 900ms.
Gebruik de opmaak uit de eerste taak. Zorg ervoor dat bij elke klik op de div met #block de breedte en hoogte toenemen met 100px en elke such toename plaatsvindt in 950ms.
Gebruik de opmaak uit de eerste taak. Zorg ervoor dat bij elke klik op de div met #block, deze 100px naar rechts beweegt en elke such beweging plaatsvindt in 700ms.
