მეთოდი fadeOut
მეთოდი fadeOut ნაზად აქრობს
ელემენტებს. ელემენტების ჩვენება შესაძლებელია მეთოდის
fadeIn
დახმარებით, გახადოს ისინი გაუმჭვირვალეები.
სინტაქსი
ჩვენება მოცემული დროის განმავლობაში,
400მწმ ნაგულისხმევად:
.fadeOut(ხანგრძლივობა);
დროის მითითება შესაძლებელია არა მხოლოდ მილიწამებში,
არამედ საკვანძო სიტყვებით slow (600მწმ)
და fast (200მწმ), რაც უფრო დიდია მნიშვნელობა,
მით უფრო ნელია ანიმაცია:
.fadeOut('slow' ან 'fast');
თუ პარამეტრები არ მიუთითებთ - ანიმაცია არ მოხდება, ელემენტები მყისიერად დაიფარება:
.fadeOut();
ასევე შესაძლებელია მეორე პარამეტრად გადავცეთ დარბილების ფუნქცია, ასევე მესამედ callback-ფუნქცია - გაეშვება ანიმაციის შესრულების შემდეგ. ორივე პარამეტრი არააუცილებელია:
.fadeOut(ხანგრძლივობა, [დარბილების ფუნქცია], [callback-ფუნქცია]);
მეთოდს შეგვიძლია გადავცეთ სხვადასხვა ოფციები, JavaScript-ის ობიექტის სახით, რომელიც შეიცავს წყვილებს გასაღები: მნიშვნელობა:
.fadeOut(ოფციები);
ასეთ ობიექტს შეუძლია გადასცეს შემდეგი
პარამეტრები და ფუნქციები - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. ამ
პარამეტრების აღწერა შეგიძლიათ ნახოთ მეთოდისთვის
animate. მაგალითად,
დავაყენოთ ხანგრძლივობა და დარბილების ფუნქცია:
.fadeOut( {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('?');
});
});
