Μέθοδος toggle

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

Σύνταξη

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

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

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

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

Μπορείτε να περάσετε ως παράμετρο display την τιμή true ή false. Εάν true, το στοιχείο θα εμφανίζεται μόνο, false - θα αποκρύπτεται:

.toggle(display);

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

.toggle();

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

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

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

.toggle(διάρκεια, [callback-συνάρτηση]);

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

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

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

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

Παράδειγμα

Ας μετά από πάτημα κουμπιού, εμφανίζουμε ομαλά μια κρυφή παράγραφο με τη βοήθεια της μεθόδου toggle. Περάροντας τη λέξη-κλειδί slow, ορίζουμε την ταχύτητα σε 600ms. Με δεύτερο πάτημα - να αποκρύπτεται:

<button>εμφάνιση κειμένου</button>
<p style="display: none">κείμενο</p>

$('button').click(function() {
	$('p').toggle('slow');
});

Δείτε επίσης

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