Μέθοδος fadeTo

Η μέθοδος fadeTo αλλάζει ομαλά τη διαφάνεια ενός στοιχείου σε μια δεδομένη τιμή, στην κλίμακα από 0 έως 1.

Σύνταξη

Η διάρκεια και η διαφάνεια ορίζονται σε οποιαδήποτε παραλλαγή χρήσης της μεθόδου. Αλλαγή της διαφάνειας σε δεδομένο χρόνο, 400ms από προεπιλογή:

.fadeTo(διάρκεια, τιμή διαφάνειας);

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

.fadeTo('slow' ή 'fast', τιμή διαφάνειας);

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

.fadeTo(διάρκεια, τιμή διαφάνειας, [συνάρτηση callback]);

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

.fadeTo(διάρκεια, τιμή διαφάνειας, [συνάρτηση προγράμματος], [συνάρτηση callback]);

Παράδειγμα

Στο επόμενο παράδειγμα, με τη βοήθεια της μεθόδου fadeTo κατά το πάτημα του κουμπιού #hide το στοιχείο με #test θα κρύβεται μέσω μείωσης της διαφάνειας σε 0.5, ενώ στο #show - θα εμφανίζεται:

<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').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
	$('#test').fadeTo(1000, 0.5);
});

Δείτε επίσης

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