მეთოდი slideDown

მეთოდი slideDown ნაზად აჩვენებს დამალულ ელემენტებს, ზემოდან ქვემოთ გორვით. ელემენტების დამალვა შესაძლებელია მეთოდის slideUp მეშვეობით.

სინტაქსი

ჩვენება მოცემულ დროში, 400მწმ ნაგულისხმევად:

.slideDown(ხანგრძლივობა);

დროის მითითება შესაძლებელია არა მხოლოდ მილიწამებში, არამედ საკვანძო სიტყვებით slow (600მწმ) და fast (200მწმ), რაც უფრო დიდია მნიშვნელობა, მით უფრო ნელია ანიმაცია:

.slideDown('slow' ან 'fast');

თუ პარამეტრები არ მიუთითებთ - ანიმაცია არ იქნება, ელემენტები მყისიერად გამოჩნდებიან:

.slideDown();

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

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

მეთოდს შეგვიძლია გადავცეთ სხვადასხვა ოფციები, JavaScript-ის ობიექტის სახით, რომელიც შეიცავს წყვილებს გასაღები: მნიშვნელობა:

.slideDown(ოფციები);

ასეთ ობიექტს შეუძლია გადასცეს შემდეგი პარამეტრები და ფუნქციები - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. ამ პარამეტრების აღწერა შეგიძლიათ ნახოთ მეთოდისთვის animate. მაგალითად, დავაყენოთ ხანგრძლივობა და გლუვი ფუნქცია:

.slideDown( {duration: 600, easing: easeInSine} );

მაგალითი

მოდით ღილაკზე დაწკაპუნების შემდეგ, ნაზად ვაჩვენოთ დამალული აბზაცი მეთოდის slideDown მეშვეობით. საკვანძო სიტყვის slow გადაცემით, ჩვენ დავაყენებთ სიჩქარეს 600მწმ-ზე. ანიმაციის დასრულების შემდეგ გამოვყოფთ კონსოლში 'Animation complete':

<button>show text</button>
<p style="display: none">text</p>

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('Animation complete')
	});
});

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

მეთოდი slideUp,
რომელიც ნაზად ამალავს ელემენტებს
მეთოდი slideToggle,
რომელიც მონაცვლეობით ახორციელებს ელემენტების ნაზ ჩვენებას/დამალვას
მეთოდი fadeIn,
რომელიც ნაზად აჩვენებს დამალულ ელემენტებს, გახდის მათ გაუმჭვირვალეებს
მეთოდი show,
რომელიც ნაზად აჩვენებს ელემენტებს