Metoda animate në jQuery
Të gjitha metodat që kemi shqyrtuar në mësimet e mëparshme, janë disi të kufizuara - ato bëjnë pikërisht atë për çfarë janë krijuar. Nëse keni nevojë për më shumë kontroll mbi animacionin - përdorni metodën universale animate.
Si parametër të parë kjo metodë pranon një objekt, në të cilin duhet të vendosni vlerat e reja të vetive CSS që dëshironi të animoni. Dhe si parametër të dytë - kohën e ekzekutimit të animacionit.
Le ta implementojmë këtë metodë në kodin HTML vijues:
<button id="button">click me</button>
<div id="elem">text...</div>
Le të duket CSS kështu:
#elem {
width: 150px;
height: 150px;
padding: 10px;
border: 1px solid green;
}
Le ta bëjmë që me klikim në buton, elementi të ngushtohet në përmasat vijuese: lartësia - 50px, gjerësia - 100px:
$('#button').click(function() {
$('#elem').animate({height: 50, width: 100}, 1000);
});
Nëse specifikoni vlerën në këtë format height: '+=50', atëherë animacioni do të funksionojë kështu: vlerës aktuale të lartësisë do t'i shtohet 50px (në rastin tonë) dhe elementi do të animohet gradualisht në vlerën e re. Le ta shohim me një shembull:
$('#button').click(function() {
$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});
Për më shumë detaje rreth metodës animate, shikoni drejtorinë e jQuery.
Ekziston kjo strukturë:
<body>
<div id="block"></div>
</body>
div {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
margin-bottom: 20px;
}
Bëni që me klikim në div me #block, gjerësia e tij të rritet në 200px për 1100ms.
Përdorni strukturën nga detyra e parë. Bëni që me çdo klik në div me #block, gjerësia e tij të rritet me 200px dhe çdo rritje e tillë të kryhet për 900ms.
Përdorni strukturën nga detyra e parë. Bëni që me çdo klik në div me #block, gjerësia dhe lartësia e tij të rriten me 100px dhe çdo rritje e tillë të kryhet për 950ms.
Përdorni strukturën nga detyra e parë. Bëni që me çdo klik në div me #block, ai të zhvendoset djathtas me 100px dhe çdo zhvendosje e tillë të kryhet për 700ms.
