Μέθοδος fadeTo

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

Σύνταξη

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

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

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

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

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

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

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

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

Παράδειγμα

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

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

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

javascript$('#show').on('click', function() {
  $('#test').fadeTo(1000, 1);
});

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

Δείτε επίσης