animate մեթոդ

animate մեթոդը թույլ է տալիս ստեղծել անիմացիոն էֆեկտներ տարբեր CSS-հատկությունների համար: Միակ պարտադիր պարամետրը - օբյեկտ CSS-հատկություններով, նման այն մեկին, ինչ մենք փոխանցում ենք css մեթոդին: Շատ հատկություններ, որոնք ունեն ոչ թվային արժեքներ կամ մի քանի արժեքներ, չեն կարող անիմացիայի ենթարկվել jQuery-ի հիմնական ֆունկցիոնալով (օրինակ background-color): Նաև ոչ միշտ աջակցվում են CSS-հատկությունների հապավված անվանումները, օրինակ font - դրա փոխարեն անհրաժեշտ է օգտագործել fontSize կամ font-size: Արժեքներից առաջ կարելի է դնել '+=' կամ '-=', այդ դեպքում հաջորդում նշված արժեքը կգումարվի կամ կհանվի հատկության ընթացիկ արժեքից: Նաև թվային արժեքների փոխարեն կարելի է դնել show, hide կամ toggle: Բոլոր jQuery էֆեկտները, ներառյալ animate, կարելի է անջատել գլոբալորեն, օգտագործելով կարգավորումը jQuery.fx.off = true, որը սահմանում է տևողության արժեքը 0:

Շարահյուսություն

Անիմացիայի առաջին պարամետրով փոխանցվում է օբյեկտ CSS-հատկություններով և դրանց արժեքներով ֆորմատով բանալի: արժեք, որոնք մենք պատրաստվում ենք անիմացիայի ենթարկել: Մնացած պարամետրերը համարվում են ոչ պարտադիր: Երկրորդ պարամետրը - որոշում է անիմացիայի տևողությունը միլիվայրկյաններով, 400մս լռելյայն: Երրորդ պարամետրով՝ սահունության ֆունկցիան անցման համար (լռելյայն դա swing է), իսկ չորրորդով՝ callback-ֆունկցիան, որ կգործարկվի անիմացիայի կատարումից հետո:

.animate(հատկություններ, [տևողություն ], [սահունության ֆունկցիա ], [callback-ֆունկցիա ]);

Ժամանակը կարելի է սահմանել ոչ միայն միլիվայրկյաններով, այլև բանալի բառերով slow (600մս) և fast (200մս), որքան մեծ է արժեքը, այնքան դանդաղ է անիմացիան: Կարելի է երկրորդ պարամետրով փոխանցել մեթոդին տարբեր օպցիաներ, JavaScript օբյեկտի տեսքով, որը պարունակում է բանալի: արժեք զույգեր:

.animate(հատկություններ, options);

Օրինակ, սահմանենք CSS-հատկություններին width և height toggle արժեքը: Տևողությունը 5000մս, սահունության ֆունկցիաները փոխանցենք օբյեկտի տեսքով, լայնության համար դա կլինի գծային ֆունկցիա, իսկ բարձրության համար՝ easeOutBounce, նաև անիմացիայի ավարտից հետո մեզ մոտ մեկ անգամ կկատարվի ֆունկցիա (տես բանալին complete), որն այնուհետև տարրից հետո #test կտեղադրի դիվ '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`	Անիմացիայի տևողությունը միլիվայրկյաններով - տող կամ թիվ: Լռելյայն `400մս`:
`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-ով, նաև սահմանենք տևողությունը 600մս - 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 ընտրիչը,
որը ընտրում է տարրերը, որոնք ներկա պահին ներգրավված են անիմացիայի մեջ