Μέθοδος fadeOut
Η μέθοδος fadeOut κρύβει ομαλά
τα στοιχεία. Τα στοιχεία μπορούν να εμφανιστούν χρησιμοποιώντας τη μέθοδο
fadeIn,
κάνοντάς τα αδιαφανή.
Σύνταξη
Εμφάνιση για καθορισμένο χρόνο,
400ms από προεπιλογή:
.fadeOut(διάρκεια);
Ο χρόνος μπορεί να οριστεί όχι μόνο σε χιλιοστά του δευτερολέπτου,
αλλά και με λέξεις-κλειδιά slow (600ms)
και fast (200ms), όσο μεγαλύτερη είναι η τιμή,
τόσο πιο αργή είναι η κίνηση:
.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. Επίσης, θα ορίσουμε
την ταχύτητα στα 1000ms:
<button id="hide">hide</button>
<button id="show">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">hide</button>
<button id="show">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('?');
});
});
