Μέθοδος fadeOut

Η μέθοδος fadeOut κρύβει ομαλά τα στοιχεία. Τα στοιχεία μπορούν να εμφανιστούν χρησιμοποιώντας τη μέθοδο fadeIn, κάνοντάς τα αδιαφανή.

Σύνταξη

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

javascript.fadeOut(διάρκεια);

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

javascript.fadeOut('slow' ή 'fast');

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

javascript.fadeOut();

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

javascript.fadeOut(διάρκεια, [λειτουργία ελέγχου ταχύτητας], [callback-συνάρτηση]);

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

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

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

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

Παράδειγμα

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

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').fadeIn(1000);
});

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

Παράδειγμα

Στο επόμενο παράδειγμα, μετά το τέλος της κίνησης κατά την εμφάνιση του στοιχείου #test εμείς θα εμφανίσουμε ένα μήνυμα με κείμενο '!', ενώ κατά την απόκρυψη με κείμενο '?':

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').fadeIn(1000, function() {
    alert('!');
  });
});

$('#hide').on('click', function() {
  $('#test').fadeOut(1000, function() {
    alert('?');
  });
});

Δείτε επίσης