jQuery-ში ეფექტის დასრულების შემდეგ მოქმედება

ზოგჯერ შეიძლება დაგჭირდეთ რაიმე მოქმედების შესრულება ეფექტის დასრულების შემდეგ. მაგალითად, ღილაკზე დაწკაპუნებისას რაიმე ბლოკმა უნდა შეამციროს სიჩქარე და მხოლოდ მას შემდეგ, რაც ის საბოლოოდ დაიმალება, საჭიროა რაიმე გამოჩნდეს ეკრანზე.

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

შეხედეთ შემდეგ მაგალითს. მოდით, გვაქვს შემდეგი HTML კოდი:

<button id="hide">დამალვა</button>
<div id="elem">ტექსტი...</div>

ამ კოდს დაემატა CSS:

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

Javascript კოდი ასე გამოიყურება:

$('#hide').click(function() {
	$('#elem').hide(1000);
	$('#hide').html('დამალული');
});

ასეთი პრობლემების თავიდან ასაცილებლად, ყველა მეთოდში ანიმაციასთან და ეფექტებთან მუშაობისთვის გათვალისწინებულია ასეთი არასავალდებულო პარამეტრი, რომელშიც ჩვენ შეგვიძლია გადავცეთ callback-ფუნქცია, რომელიც შესრულდება ანიმაციის დასრულების შემდეგ. ჩვენს შემთხვევაში, ჩვენ გადავეცით callback-ფუნქცია მეთოდს hide, და უკვე ამ ფუნქციის ტანში შევცვალეთ ღილაკის სახელი:

$('#hide').click(function() {
	$('#elem').hide(1000, function() {
		$('#hide').html('დამალული');
	});
});