Εφέ του jQuery - Αнимάσεις

Η μέθοδος jQuery animate() σου επιτρέπει να δημιουργήσεις προσαρμοσμένες αニματίσεις.

Παρουσίαση Εφέ



jQuery

jQuery Αニματίσεις - Μέθοδος animate()

Η μέθοδος jQuery animate() χρησιμοποιείται για τη δημιουργία προσαρμοσμένων αニματίσεων.

Γραμματική:

$(selector).animate({params},speed,callback);

Απαιτητική params Η παράμετρος ορίζει τις ιδιότητες CSS που δημιουργούν την αニμάτιση.

Προαιρετική speed Η παράμετρος καθορίζει την διάρκεια της επίδρασης. Μπορεί να πάρει τις τιμές: "slow", "fast" ή milliseconds.

Προαιρετική callback Οι παραμέτρους είναι το όνομα της συνάρτησης που εκτελείται μετά την ολοκλήρωση της αニμάτισης.

Η παρακάτω παράδειγμα δείχνει τη απλή εφαρμογή της μεθόδου animate(); την κινεί στο αριστερό μέχρι η ιδιότητα left να είναι ίση με 250 pixel:

Παράδειγμα

$("button").click(function(){
  $("div").animate({left:'250px'});
);

Δοκιμάστε το προσωπικά

Συμβουλή:Προεπιλεγμένα, όλα τα στοιχεία HTML έχουν μια στατική θέση και δεν μπορούν να μετακινηθούν.

Αν θέλεις να επεξεργαστείς τη θέση, θυμήσου να ρυθμίσεις την ιδιότητα position του στοιχείου CSS σε relative, fixed ή absolute!

jQuery animate() - Επεξεργασία πολλαπλών ιδιοτήτων

Παρακαλώ προσοχή, μπορείς να χρησιμοποιείς πολλαπλές ιδιότητες κατά τη δημιουργία της αニμάτισης:

Παράδειγμα

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  );
);

Δοκιμάστε το προσωπικά

Συμβουλή:Μπορείς να χρησιμοποιήσεις τη μέθοδο animate() για να επεξεργαστείς όλες τις ιδιότητες CSS;

Ναι, σχεδόν! Ωστόσο, πρέπει να θυμάσαι ένα σημαντικό πράγμα: όταν χρησιμοποιείς το animate(), πρέπει να γράφεις όλα τα ονόματα των ιδιοτήτων με CamelCase, όπως, πρέπει να χρησιμοποιείς paddingLeft αντί για padding-left, marginRight αντί για margin-right, κ.λπ.

Επιπλέον, οι ανιματίσεις χρωμάτων δεν περιλαμβάνονται στην κεντρική βιβλιοθήκη του jQuery.

Αν χρειάζεστε ανίμαση χρωμάτων, πρέπει να κατεβάσετε την πρόσθετη βιβλιοθήκη Color Animations από το jQuery.com.

jQuery animate() - Χρήση σχετικών τιμών

Μπορείτε επίσης να καθορίσετε τιμές σχετικές (τιμές που είναι σχετικές με την τρέχουσα τιμή του στοιχείου). Θα πρέπει να προσθέσετε += ή -= μπροστά από την τιμή:

Παράδειγμα

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  );
);

Δοκιμάστε το προσωπικά

jQuery animate() - Χρήση προκαθορισμένων τιμών

Μπορείτε να θέσετε τις τιμές της ανίμασης των ιδιοτήτων σε "show", "hide" ή "toggle":

Παράδειγμα

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  );
);

Δοκιμάστε το προσωπικά

jQuery animate() - Χρήση της λειτουργίας σειράς

Στα δέοντα, το jQuery παρέχει τη λειτουργία σειράς για τις ανιματίσεις.

Αυτό σημαίνει ότι αν γράψετε πολλαπλές κλήσεις animate() ένα μετά το άλλο, το jQuery δημιουργεί μια "εσωτερική" σειρά που περιέχει αυτές τις κλήσεις και εκτελεί αυτές τις κλήσεις μια προς μια.

Παράδειγμα 1

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

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
);

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Το παρακάτω παράδειγμα μετακινεί το στοιχείο <div> στα δεξιά και αυξάνει το μέγεθος του κειμένου:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
);

Δοκιμάστε το προσωπικά