Η μέθοδος animate στο jQuery

Όλες οι μέθοδοι που εξετάσαμε στα προηγούμενα μαθήματα είναι κάπως περιορισμένες - κάνουν ακριβώς αυτό για το οποίο δημιουργήθηκαν. Εάν χρειάζεστε περισσότερο έλεγχο για την κίνηση - χρησιμοποιήστε την καθολική μέθοδο animate.

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

Ας υλοποιήσουμε αυτή τη μέθοδο στον ακόλουθο κώδικα HTML:

<button id="button">click me</button>
<div id="elem">text...</div>

Ας φαίνεται το CSS έτσι:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

Ας κάνουμε έτσι ώστε με το πάτημα στο κουμπί το στοιχείο να συμπιέζεται στους ακόλουθους διαστάσεις: ύψος - 50px, πλάτος - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

Εάν ορίσετε την τιμή σε αυτή τη μορφή height: '+=50', τότε η κίνηση θα λειτουργεί έτσι: στην τρέχουσα τιμή του ύψους θα προστεθεί 50px (στην περίπτωσή μας) και το στοιχείο θα κινητοποιηθεί ομαλά στη νέα τιμή. Ας δούμε στο παράδειγμα:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

Για περισσότερες λεπτομέρειες σχετικά με τη μέθοδο animate δείτε στο εγχειρίδιο jQuery.

animate

Υπάρχει τέτοια HTML κατασκευή:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

Κάντε έτσι ώστε με το πάτημα στο div με #block το πλάτος του να αυξηθεί σε 200px σε 1100ms.

Χρησιμοποιήστε την HTML κατασκευή από την πρώτη άσκηση. Κάντε έτσι ώστε με κάθε πάτημα στο div με #block το πλάτος του να αυξάνεται κατά 200px και κάθε τέτοια αύξηση να συμβαίνει σε 900ms.

Χρησιμοποιήστε την HTML κατασκευή από την πρώτη άσκηση. Κάντε έτσι ώστε με κάθε πάτημα στο div με #block το πλάτος και το ύψος του να αυξάνονται κατά 100px και κάθε τέτοια αύξηση να συμβαίνει σε 950ms.

Χρησιμοποιήστε την HTML κατασκευή από την πρώτη άσκηση. Κάντε έτσι ώστε με κάθε πάτημα στο div με #block, να μετακινείται προς τα δεξιά κατά 100px και κάθε τέτοια μετακίνηση να συμβαίνει σε 700ms.