Μέθοδος fadeIn

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

Σύνταξη

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

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

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

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

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

.fadeIn();

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

.fadeIn(διάρκεια, [συνάρτηση προβολής], [συνάρτηση callback]);

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

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

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

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

Παράδειγμα

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

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

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

Παράδειγμα

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

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

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

Δείτε επίσης

μέθοδος fadeOut,
που κρύβει ομαλά τα στοιχεία, κάνοντάς τα διαφανή
μέθοδος show,
που εμφανίζει ομαλά τα στοιχεία
μέθοδος slideDown,
που εμφανίζει ομαλά τα στοιχεία