მეთოდი animate

მეთოდი animate საშუალებას აძლევს შექმნას ანიმაციური ეფექტები სხვადასხვა CSS-თვისებისთვის. ერთადერთი სავალდებულო პარამეტრი - ობიექტი CSS-თვისებებით, მსგავსი იმისა, რასაც ჩვენ გადავცემთ მეთოდს css. ბევრი თვისება, რომელსაც აქვს არარიცხვითი მნიშვნელობები ან რამდენიმე მნიშვნელობა, ვერ ანიმირებდება jQuery-ის ბაზისური ფუნქციონალით (მაგალითად background-color). ასევე ყოველთვის არ არის მხარდაჭერილი CSS-თვისებების შემოკლებული სახელები, მაგალითად font - ამის ნაცვლად საჭიროა გამოიყენოთ fontSize ან font-size. მნიშვნელობების წინ შეგიძლიათ დააყენოთ '+=' ან '-=', ასეთ შემთხვევაში შემდგომში მითითებული მნიშვნელობა დაემატება ან გამოაკლდება თვისების მიმდინარე მნიშვნელობას. ასევე რიცხვითი მნიშვნელობების ნაცვლად შეგიძლიათ დააყენოთ show, hide ან toggle. ყველა jQuery ეფექტი, animate-ის ჩათვლით, შეიძლება გამორთოს გლობალურად, გამოყენებით პარამეტრი jQuery.fx.off = true, რომელიც აყენებს ხანგრძლივობის მნიშვნელობას 0-ზე.

სინტაქსი

პირველ პარამეტრად ანიმაციას გადაეცემა ობიექტი CSS-თვისებებით და მათი მნიშვნელობებით ფორმატში გასაღები: მნიშვნელობა, რომლის ანიმირებასაც ვაპირებთ. დარჩენილი პარამეტრები ითვლება არასავალდებულოდ. მეორე პარამეტრი - განსაზღვრავს ანიმაციის ხანგრძლივობას მილიწამებში, 400ms ნაგულისხმევად. მესამე პარამეტრად გადაეცემა გლუვი ფუნქცია გადასვლისთვის (ნაგულისხმევად ეს არის swing), ასევე მეოთხე - callback-ფუნქცია, რომელიც გაეშვება ანიმაციის შესრულების შემდეგ:

.animate(თვისებები, [ხანგრძლივობა ], [გლუვი ფუნქცია ], [callback-ფუნქცია ]);

დროის მითითება შესაძლებელია არა მხოლოდ მილიწამებში, არამედ საკვანძო სიტყვებით slow (600ms) და fast (200ms), რაც უფრო დიდია მნიშვნელობა, მით უფრო ნელია ანიმაცია. შესაძლებელია მეორე პარამეტრად გადავცეთ მეთოდს სხვადასხვა ოფციები, JavaScript-ის ობიექტის სახით, რომელიც შეიცავს წყვილებს გასაღები: მნიშვნელობა:

.animate(თვისებები, options);

მაგალითად, დავაყენოთ CSS-თვისებებისთვის width და height მნიშვნელობა toggle. ხანგრძლივობა 5000ms-ზე, გლუვ ფუნქციებს გადავცემთ ობიექტის სახით, სიგანისთვის ეს იქნება ხაზოვანი ფუნქცია, ხოლო სიმაღლისთვის - easeOutBounce, ასევე ანიმაციის დასრულების შემდეგ ჩვენ ერთხელ შესრულდება ფუნქცია (იხ. გასაღები complete), რომელიც ელემენტის შემდეგ #test მოათავსებს div-ს წარწერით 'Animation complete.':

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

ქვემოთ მოცემულ ცხრილში მოყვანილია ობიექტის options თვისებები და მეთოდები და მათი აღწერა:

სახელი	აღწერა
`duration`	ანიმაციის ხანგრძლივობა მილიწამებში - სტრიქონი ან რიცხვი. `400ms` ნაგულისხმევად.
`easing`	განსაზღვრავს რომელი გლუვი ფუნქცია გამოიყენოს. `swing` ნაგულისხმევად.
`queue`	ბულეანური მნიშვნელობა ან სტრიქონი. `true` ნაგულისხმევად. მიუთითებს - ჩაისვას თუ არა ანიმაცია რიგში. `false` მნიშვნელობისას ანიმაცია დაიწყება დაუყოვნებლივ. თუ პარამეტრი გადაცემულია სტრიქონად, მაშინ ანიმაცია ჩაისმება რიგში, რომელიც წარმოდგენილია ამ პარამეტრით. რიგის გამოყენებისას მომხმარებლის სახელით, ანიმაცია არ გაეშვება ავტომატურად, მის გასაშვებად - გამოიყენეთ `dequeue('queuename')`.
`specialEasing`	აქ შეგიძლიათ გადაცეთ ობიექტი, რომელშიც გასაღებები იქნება CSS-თვისებები, ხოლო მნიშვნელობები - შესაბამისი მათთვის გლუვი ფუნქციები.
`step`	ფუნქცია, რომელიც იწვევა ყოველი ანიმირებული თვისებისთვის ყოველ ანიმირებულ ელემენტზე. ის საშუალებას აძლევს შეცვალოს `Tween` ობიექტი, რათა შეცვალოს თვისების მნიშვნელობა მანამ, სანამ ის დაყენდება. პარამეტრებად იღებს `tween`-ის მიმდინარე მნიშვნელობას და `Tween` ობიექტს.
`progress`	ფუნქცია, რომელიც იწვევა ანიმაციის ყოველი ნაბიჯის შემდეგ, მხოლოდ ერთხელ თითოეულ ელემენტზე დამოუკიდებლად ანიმირებული თვისებების რაოდენობისა. ფუნქცია იღებს სამ პარამეტრს `animation` (პრომისის სახით), `progress` (რიცხვი `0`-დან `1`-მდე) და `remainingMs` (დარჩენილი მილიწამების რიცხვი).
`complete`	ფუნქცია, რომელიც იწვევა ერთხელ ელემენტის ანიმაციის დასრულების შემდეგ. ფუნქცია იღებს `animation` (პრომისის სახით).
`start`	ფუნქცია, რომელიც იწვევა, როდესაც ელემენტის ანიმაცია იწყება. ფუნქცია იღებს `animation` (პრომისის სახით) და `jumpedToEnd` (ბულეანური მნიშვნელობა. თუ `true`, მაშინ ანიმაცია ავტომატურად სრულდება).
`done`	ფუნქცია, რომელიც იწვევა, როდესაც ელემენტის ანიმაცია მთავრდება (მისი პრომისი შესრულებულია წარმატებით). ფუნქცია იღებს `animation` (პრომისის სახით) და `jumpedToEnd` (ბულეანური მნიშვნელობა. თუ `true`, მაშინ ანიმაცია ავტომატურად სრულდება).
`fail`	ფუნქცია, რომელიც იწვევა, როდესაც ელემენტის ანიმაცია მთავრდება შეცდომით (მისი პრომისი შესრულებულია შეცდომით). ფუნქცია იღებს `animation` (პრომისის სახით) და `jumpedToEnd` (ბულეანური მნიშვნელობა. თუ `true`, მაშინ ანიმაცია ავტომატურად სრულდება).
`always`	ფუნქცია, რომელიც იწვევა, როდესაც ელემენტის ანიმაცია მთავრდება ან ჩერდება დასრულების გარეშე (მისი პრომისი შესრულებულია წარმატებით ან შეცდომით). ფუნქცია იღებს `animation` (პრომისის სახით) და `jumpedToEnd` (ბულეანური მნიშვნელობა. თუ `true`, მაშინ ანიმაცია ავტომატურად სრულდება).

მაგალითი

მოდით, დააჭირეთ ღილაკს #left, რათა გადავიტანოთ მწვანე კვადრატი მარცხნივ, ხოლო ღილაკზე #right მარჯვნივ 50px-ით, ასევე დავაყენოთ ხანგრძლივობა 600ms-ზე - ბრძანებით slow:

<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

იხილეთ აგრეთვე

მეთოდი show,
რომელიც გლუვად აჩვენებს ელემენტებს
მეთოდი stop,
რომელიც საშუალებას აძლევს შეაჩეროს დაწყებული ანიმაცია
მეთოდი delay,
რომელიც აყენებს მოვლენების შესრულების დაყოვნებას
თვისება jQuery.fx.off,
რომელიც საშუალებას აძლევს გლობალურად გამორთოს ანიმაცია
სელექტორი animated,
რომელიც ირჩევს ელემენტებს, რომლებიც მიმდინარე მომენტში ჩართულია ანიმაციაში