Μέθοδος animate

Η μέθοδος animate επιτρέπει τη δημιουργία κινούμενων εφέ για διάφορες CSS-ιδιότητες. Η μοναδική υποχρεωτική παράμετρος - ένα αντικείμενο με CSS-ιδιότητες, παρόμοιο με αυτό που περνάμε στη μέθοδο css. Πολλές ιδιότητες, που έχουν μη αριθμητικές τιμές ή πολλές τιμές δεν μπορούν να κινηματογραφηθούν από τη βασική λειτουργικότητα του jQuery (για παράδειγμα background-color). Επίσης, δεν υποστηρίζονται πάντα οι συντομευμένες ονομασίες CSS-ιδιοτήτων, για παράδειγμα font - αντί για αυτό πρέπει να χρησιμοποιήσετε fontSize ή font-size. Πριν από τις τιμές μπορείτε να βάλετε '+=' ή '-=', σε αυτήν την περίπτωση η τιμή που καθορίζεται στη συνέχεια θα προστεθεί ή θα αφαιρεθεί από την τρέχουσα τιμή της ιδιότητας. Επίσης, αντί για αριθμητικές τιμές μπορείτε να βάλετε show, hide ή toggle. Όλα τα εφέ του jQuery, συμπεριλαμβανομένου του animate, μπορούν να απενεργοποιηθούν καθολικά, χρησιμοποιώντας τη ρύθμιση jQuery.fx.off = true, η οποία ορίζει την τιμή της διάρκειας σε 0.

Σύνταξη

Ως πρώτη παράμετρος της κινούμενης εικόνας περνάμε ένα αντικείμενο με CSS-ιδιότητες και τις τιμές τους στη μορφή κλειδί: τιμή, που πρόκειται να κινηματογραφήσουμε. Οι υπόλοιπες παράμετροι θεωρούνται προαιρετικές. Η δεύτερη παράμετρος - καθορίζει τη διάρκεια της κινούμενης εικόνας σε χιλιοστά του δευτερολέπτου, 400ms από προεπιλογή. Τρίτη παράμετρος η συνάρτηση ομαλότητας για τη μετάβαση (από προεπιλογή είναι swing), και επίσης τέταρτη - συνάρτηση callback, που θα εκτελεστεί μετά την ολοκλήρωση της κινούμενης εικόνας:

.animate(ιδιότητες, [διάρκεια ], [συνάρτηση ομαλότητας ], [συνάρτηση callback ]);

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

.animate(ιδιότητες, options);

Για παράδειγμα, ας ορίσουμε για τις CSS-ιδιότητες width και height την τιμή toggle. Διάρκεια σε 5000ms, τις συναρτήσεις ομαλότητας θα τις περάσουμε ως αντικείμενο, για το πλάτος αυτή θα είναι γραμμική συνάρτηση, ενώ για το ύψος - easeOutBounce, επίσης κατά την ολοκλήρωση της κινούμενης εικόνας θα εκτελεστεί μία φορά η συνάρτηση (βλ. κλειδί complete), που μετά το στοιχείο με #test θα τοποθετήσει ένα div με την επιγραφή 'Animation complete.':

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

Παρακάτω στον πίνακα δίνονται οι ιδιότητες και οι μέθοδοι του αντικειμένου options και η περιγραφή τους:

Όνομα	Περιγραφή
`duration`	Διάρκεια κινούμενης εικόνας σε χιλιοστά του δευτερολέπτου - συμβολοσειρά ή αριθμός. `400ms` από προεπιλογή.
`easing`	Καθορίζει ποια συνάρτηση ομαλότητας να χρησιμοποιηθεί. `swing` από προεπιλογή.
`queue`	Δυαδική τιμή ή συμβολοσειρά. `true` από προεπιλογή. Υποδεικνύει - να βάλει την κινούμενη εικόνα στην ουρά. Με τιμή `false` η κινούμενη εικόνα θα ξεκινήσει αμέσως. Εάν η παράμετρος περαστεί ως συμβολοσειρά, τότε η κινούμενη εικόνα θα μπει στην ουρά, που αντιπροσωπεύεται από αυτήν την παράμετρο. Κατά την χρήση ουράς με προσαρμοσμένο όνομα, η κινούμενη εικόνα δεν θα ξεκινήσει αυτόματα, για να την ξεκινήσετε - χρησιμοποιήστε `dequeue('queuename')`.
`specialEasing`	Εδώ μπορείτε να περάσετε ένα αντικείμενο, στο οποίο τα κλειδιά θα είναι CSS-ιδιότητες, και οι τιμές - οι αντίστοιχες συναρτήσεις ομαλότητας.
`step`	Συνάρτηση, που καλείται για κάθε κινούμενη ιδιότητα κάθε κινούμενου στοιχείου. Επιτρέπει την τροποποίηση του αντικειμένου `Tween`, για να αλλάξετε την τιμή της ιδιότητας πριν από το που ορίζεται. Ως παραμέτρους δέχεται την τρέχουσα τιμή `tween` και το αντικείμενο `Tween`.
`progress`	Συνάρτηση, που καλείται μετά από κάθε βήμα της κινούμενης εικόνας, μόνο μία φορά για κάθε στοιχείο ανεξάρτητα από τον αριθμό των κινούμενων ιδιοτήτων. Η συνάρτηση δέχεται τρεις παραμέτρους `animation` (σε μορφή promise), `progress` (αριθμός από `0` έως `1`) και `remainingMs` (αριθμός υπολοίπων χιλιοστών του δευτερολέπτου).
`complete`	Συνάρτηση, που καλείται μία φορά μετά το τέλος της κινούμενης εικόνας του στοιχείου. Η συνάρτηση δέχεται `animation` (σε μορφή promise).
`start`	Συνάρτηση, που καλείται, όταν η κινούμενη εικόνα του στοιχείου ξεκινά. Η συνάρτηση δέχεται `animation` (σε μορφή promise) και `jumpedToEnd` (Δυαδική τιμή. Εάν `true`, τότε η κινούμενη εικόνα αυτόματα ολοκληρώνεται).
`done`	Συνάρτηση, που καλείται, όταν η κινούμενη εικόνα του στοιχείου τελειώνει (το promise της εκπληρώθηκε επιτυχώς). Η συνάρτηση δέχεται `animation` (σε μορφή promise) και `jumpedToEnd` (Δυαδική τιμή. Εάν `true`, τότε η κινούμενη εικόνα αυτόματα ολοκληρώνεται).
`fail`	Συνάρτηση, που καλείται, όταν η κινούμενη εικόνα του στοιχείου τελειώνει με σφάλμα (το promise της εκπληρώθηκε με σφάλμα). Η συνάρτηση δέχεται `animation` (σε μορφή promise) και `jumpedToEnd` (Δυαδική τιμή. Εάν `true`, τότε η κινούμενη εικόνα αυτόματα ολοκληρώνεται).
`always`	Συνάρτηση, που καλείται, όταν η κινούμενη εικόνα του στοιχείου ολοκληρώνεται ή σταματάει χωρίς ολοκλήρωση (το promise της εκπληρώθηκε επιτυχώς ή με σφάλμα). Η συνάρτηση δέχεται `animation` (σε μορφή promise) και `jumpedToEnd` (Δυαδική τιμή. Εάν `true`, τότε η κινούμενη εικόνα αυτόματα ολοκληρώνεται).

Παράδειγμα

Ας πατήσουμε στο κουμπί #left, θα μετακινούμε το πράσινο τετράγωνο προς τα αριστερά, και στο κουμπί #right προς τα δεξιά κατά 50px, επίσης θα ορίσουμε διάρκεια σε 600ms - με την εντολή slow:

<button id="left">αριστερά</button>
<button id="right">δεξιά</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

Δείτε επίσης

μέθοδος show,
που ομαλά εμφανίζει στοιχεία
μέθοδος stop,
που επιτρέπει να σταματήσει την εκτελούμενη κινούμενη εικόνα
μέθοδος delay,
που ορίζει καθυστέρηση εκτέλεσης γεγονότων
ιδιότητα jQuery.fx.off,
που επιτρέπει την καθολική απενεργοποίηση της κινούμενης εικόνας
επιλογέας animated,
που επιλέγει στοιχεία, που αυτήν τη στιγμή εμπλέκονται σε κινούμενη εικόνα