animate მეთოდი jQuery-ში

ყველა ის მეთოდი, რომელიც წინა გაკვეთილებზე განვიხილეთ, გარკვეულწილად შეზღუდულია - ისინი აკეთებენ ზუსტად იმას, რისთვისაც შექმნილან. თუ თქვენ გჭირდებათ მეტი კონტროლი ანიმაციაზე - გამოიყენეთ უნივერსალური მეთოდი animate.

პირველ პარამეტრად ეს მეთოდი იღებს ობიექტს, რომელშიც უნდა მიუთითოთ CSS თვისებების ახალი მნიშვნელობები, რომლების ანიმირებაც გსურთ. ხოლო მეორე პარამეტრად - ანიმაციის შესრულების დროს.

მოდით, ეს მეთოდი გავაკეთოთ შემდეგ HTML კოდზე:

<button id="button">click me</button>
<div id="elem">text...</div>

დავუშვათ, CSS ასე გამოიყურება:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

მოდით, გავაკეთოთ ისე, რომ ღილაკზე დაჭერისას ელემენტი შემცირდეს შემდეგ ზომებამდე: სიმაღლე - 50px, სიგანე - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

თუ მნიშვნელობა ამ ფორმატში მიუთითებთ height: '+=50', მაშინ ანიმაცია იმუშავებს ასე: სიმაღლის მიმდინარე მნიშვნელობას დაემატება 50px (ჩვენს შემთხვევაში) და ელემენტი ნელ-ნელა ანიმირდება ახალ მნიშვნელობამდე. ვნახოთ მაგალითზე:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

მეთოდ animate-ის შესახებ უფრო დეტალურად იხილეთ jQuery-ს სპრავოჩნიკში.

animate

არსებობს ასეთი ვერსტკა:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

გაუკეთეთ ისე, რომ დივზე #block დაწკაპუნებისას მისი სიგანე გაიზარდოს 200px-მდე 1100ms-ში.

გამოიყენეთ ვერსტკა პირველი ამოცანიდან. გაუკეთეთ ისე, რომ ყოველ ჯერზე დივზე #block დაწკაპუნებისას მისი სიგანე გაიზარდოს 200px-ით და ყოველი ასეთი გაზრდა მოხდეს 900px-ში.

გამოიყენეთ ვერსტკა პირველი ამოცანიდან. გაუკეთეთ ისე, რომ ყოველ ჯერზე დივზე #block დაწკაპუნებისას მისი სიგანე და სიმაღლე გაიზარდოს 100px-ით და ყოველი ასეთი გაზრდა მოხდეს 950px-ში.

გამოიყენეთ ვერსტკა პირველი ამოცანიდან. გაუკეთეთ ისე, რომ ყოველ ჯერზე დივზე #block დაწკაპუნებისას, იგი გადაადგილდეს მარჯვნივ 100px-ით და ყოველი ასეთი გადაადგილება მოხდეს 700px-ში.