მეთოდი fadeIn

მეთოდი fadeIn ნელა აჩვენებს დამალულ ელემენტებს, რაც მათ გახდის გაუმჭვირვალედ. დამალვა ელემენტების შესაძლებელია მეთოდის fadeOut გამოყენებით, რაც მათ გახდის გამჭვირვალედ.

სინტაქსი

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

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

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

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

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

.fadeIn();

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

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

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

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

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

.fadeIn( {duration: 800, easing: easeInSine} );

მაგალითი

შემდეგ მაგალითში ღილაკზე დაჭერისას #hide ელემენტი #test დამალული იქნება მეთოდის fadeOut გამოყენებით, ხოლო ღილაკზე #show - გამოჩნდება, მეთოდის fadeIn გამოყენებით. ასევე დავაყენებთ სიჩქარეს 1000მწმ-ზე:

<button id="hide">დამალვა</button>
<button id="show">ჩვენება</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#show').on('click', function() {
	$('#test').fadeIn(1000);
});

$('#hide').on('click', function() {
	$('#test').fadeOut(1000);
});

მაგალითი

შემდეგ მაგალითში ანიმაციის დასრულების შემდეგ ელემენტის #test ჩვენებისას ჩვენ გამოვიტანთ შეტყობინებას ტექსტით '!', ხოლო დამალვისას ტექსტით '?':

<button id="hide">დამალვა</button>
<button id="show">ჩვენება</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#show').on('click', function() {
	$('#test').fadeIn(1000, function() {
		alert('!');
	});
});

$('#hide').on('click', function() {
	$('#test').fadeOut(1000, function() {
		alert('?');
	});
});

იხილეთ ასევე

მეთოდი fadeOut,
რომელიც ნელა აფერხებს ელემენტების დამალვას, რაც მათ გახდის გამჭვირვალედ
მეთოდი show,
რომელიც ნელა აჩვენებს ელემენტებს
მეთოდი slideDown,
რომელიც ნელა აჩვენებს ელემენტებს