Μέθοδος fadeToggle

Η μέθοδος fadeToggle εναλλάξ ομαλά εμφανίζει ή κρύβει στοιχεία, κινούμενα τη διαφάνειά τους.

Σύνταξη

Εμφάνιση/απόκρυψη σε δεδομένο χρόνο, 400ms από προεπιλογή:

.fadeToggle(διάρκεια);

Ο χρόνος μπορεί να οριστεί όχι μόνο σε χιλιοστά του δευτερολέπτου, αλλά και με λέξεις-κλειδιά slow (600ms) και fast (200ms), όσο μεγαλύτερη η τιμή, τόσο πιο αργή η κίνηση:

.fadeToggle('slow' ή 'fast');

Εάν δεν καθοριστούν παράμετροι - δεν θα υπάρξει κίνηση, τα στοιχεία θα εμφανίζονται/κρύβονται αμέσως:

.fadeToggle();

Μπορείτε επίσης ως δεύτερη παράμετρο να περάσετε μια συνάρτηση ομαλότητας, και ως τρίτη μια callback-συνάρτηση - θα ενεργοποιηθεί μετά την ολοκλήρωση της κίνησης. Και οι δύο παράμετροι είναι προαιρετικές:

.fadeToggle(διάρκεια, [συνάρτηση ομαλότητας], [callback-συνάρτηση]);

Μπορείτε να περάσετε στη μέθοδο διάφορες επιλογές, σε μορφή αντικειμένου JavaScript, που περιέχει ζεύγη κλειδί: τιμή:

.fadeToggle(επιλογές);

Ένα τέτοιο αντικείμενο μπορεί να μεταφέρει τις ακόλουθες παραμέτρους και συναρτήσεις - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Περιγραφή αυτών των παραμέτρων μπορείτε να δείτε για τη μέθοδο animate. Για παράδειγμα, ας ορίσουμε τη διάρκεια και τη συνάρτηση ομαλότητας:

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

Παράδειγμα

Στο επόμενο παράδειγμα, στην πρώτη πίεση του κουμπιού #toggle το στοιχείο με #test θα κρύβεται, και στην επαναλαμβανόμενη - θα εμφανίζεται. Για αυτό χρησιμοποιούμε τη μέθοδο fadeToggle. Επίσης θα ορίσουμε την ταχύτητα σε 1000ms και την τιμή της συνάρτησης ομαλότητας σε linear:

<button id="toggle">toggle</button>
<div id="test"></div>

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

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Δείτε επίσης

μέθοδος slideToggle,
που εναλλάσσει ομαλή εμφάνιση/απόκρυψη στοιχείων
μέθοδος fadeTo,
που αλλάζει τη διαφάνεια στοιχείων
μέθοδος toggle,
που εναλλάσσει ομαλή εμφάνιση/απόκρυψη στοιχείων
μέθοδος animate,
που κινεί ιδιότητες στοιχείων