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

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

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

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

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

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

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

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

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

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

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

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

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

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