Μέθοδος slideToggle
Η μέθοδος slideToggle εμφανίζει ομαλά
κρυφά στοιχεία και αποκρύπτει τα ορατά.
Σύνταξη
Εμφάνιση/απόκρυψη σε δεδομένο χρόνο,
400ms από προεπιλογή:
.slideToggle(διάρκεια);
Ο χρόνος μπορεί να οριστεί όχι μόνο σε χιλιοστά του δευτερολέπτου,
αλλά και με τις λέξεις-κλειδιά slow (600ms)
και fast (200ms), όσο μεγαλύτερη η τιμή,
τόσο πιο αργή η κίνηση:
.slideToggle('slow' ή 'fast');
Εάν δεν καθοριστούν παράμετροι - δεν θα υπάρξει κίνηση, τα στοιχεία θα εμφανίζονται/αποκρύπτονται ακαριαία:
.slideToggle();
Μπορείτε επίσης ως δεύτερη παράμετρο να περάσετε μια συνάρτηση ομαλότητας, και ως τρίτη μια callback-συνάρτηση - θα ενεργοποιηθεί μετά την ολοκλήρωση της κίνησης. Και οι δύο παράμετροι είναι προαιρετικές:
.slideToggle(διάρκεια, [συνάρτηση ομαλότητας], [callback-συνάρτηση]);
Μπορείτε να περάσετε στη μέθοδο διάφορες επιλογές, με τη μορφή ενός αντικειμένου JavaScript, που περιέχει ζεύγη κλειδί: τιμή:
.slideToggle(επιλογές);
Ένα τέτοιο αντικείμενο μπορεί να μεταφέρει τις ακόλουθες
παραμέτρους και συναρτήσεις - duration, easing,
queue, specialEasing, step,
progress, complete, start,
done, fail, always. Περιγραφή
αυτών των παραμέτρων μπορείτε να δείτε για τη μέθοδο
animate. Για παράδειγμα,
ας ορίσουμε τη διάρκεια και τη συνάρτηση ομαλότητας:
.slideToggle( {duration: 600, easing: easeInSine} );
Παράδειγμα
Ας αποκρύψουμε μετά από πάτημα του κουμπιού, ομαλά
το γονικό div, που περιέχει παραγράφους,
με τη βοήθεια της μεθόδου slideToggle (αυτό το div
θα το βρούμε με τη βοήθεια της μεθόδου
parent),
μετά από επαναλαμβανόμενο πάτημα του κουμπιού, το div θα
εμφανιστεί ξανά ομαλά κ.ο.κ. Περνώντας τη λέξη-κλειδί
slow, θα ορίσουμε την ταχύτητα σε 600ms:
<button>toggle text</button>
<div>
<p id='test'>text text text text text text text</p>
<p>text text text text text text text</p>
<p>text text text text text text text</p>
</div>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
