jQuery-də animate metodu
Əvvəlki dərslərdə müzakirə etdiyimiz bütün metodlar bir qədər məhduddur - onlar yaradıldıqları məqsəd üçün nəzərdə tutulanları edirlər. Əgər siz animasiya üzərində daha çox nəzarət tələb edirsinizsə, universal animate metodundan istifadə edin.
Bu metod ilk parametr kimi, animasiya etmək istədiyiniz CSS xassələrinin yeni dəyərlərini təyin etməli olduğunuz bir obyekt qəbul edir. İkinci parametr isə animasiyanın icra müddətidir.
Gəlin bu metodu aşağıdakı HTML kodunda həyata keçirək:
<button id="button">click me</button>
<div id="elem">text...</div>
CSS-in belə görünməsini icazə verin:
#elem {
width: 150px;
height: 150px;
padding: 10px;
border: 1px solid green;
}
Gəlin edək ki, düyməyə kliklənildikdə element aşağıdakı ölçülərə qədər kiçilsin: hündürlük - 50px, en - 100px:
$('#button').click(function() {
$('#elem').animate({height: 50, width: 100}, 1000);
});
Əgər dəyər height: '+=50' formatında göstərilsə, onda animasiya belə işləyəcək: hazırkı hündürlük dəyərinə 50px (bizim vəziyyətimizdə) əlavə olunacaq və element yeni dəyərə qədər hamar şəkildə animasiya olunacaq. Gəlin nümunəyə baxaq:
$('#button').click(function() {
$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});
Animate metodu haqqında ətraflı məlumatı jQuery arayışında izləyin.
Belə bir markup var:
<body>
<div id="block"></div>
</body>
div {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
margin-bottom: 20px;
}
Elə edin ki, #block id-li div-ə kliklənildikdə onun eni 1100ms ərzində 200px qədər artsın.
Birinci məsələdən markup-dan istifadə edin. Elə edin ki, #block id-li div-ə hər dəfə kliklənildikdə onun eni 200px qədər artsın və hər bir belə artım 900px ərzində baş versin.
Birinci məsələdən markup-dan istifadə edin. Elə edin ki, #block id-li div-ə hər dəfə kliklənildikdə onun eni və hündürlüyü 100px qədər artsın və hər bir belə artım 950px ərzində baş versin.
Birinci məsələdən markup-dan istifadə edin. Elə edin ki, #block id-li div-ə hər dəfə kliklənildikdə, o 100px sağa doğru hərəkət etsin və hər bir belə hərəkət 700px ərzində baş versin.
