jQuery 效果 - animate() 方法

Οδηγός αναφορών jQuery αποτελεσμάτων

实例

改变 "div" 元素的高度：

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

亲自试一试

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

Σημείωση:使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

语法 1

$().animate(styles,speed,easing,callback)
Παράμετροι Περιγραφή
styles

必需。规定产生动画效果的 CSS 样式和值。

可能的 CSS 样式值（提供实例）：

Σημείωση:Οι CSS τάσεις χρησιμοποιούν το όνομα του DOM (π.χ. "fontSize") για τη ρύθμιση, και όχι το όνομα CSS (π.χ. "font-size").
speed

Προαιρετικό. Καθορίζει την ταχύτητα της κίνησης. Η προεπιλεγμένη τιμή είναι "normal".

Πιθανές τιμές:

  • millisecond (π.χ. 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Προαιρετικό. Καθορίζει τη συνάρτηση easing που πρέπει να χρησιμοποιηθεί σε διαφορετικά σημεία της κίνησης.

Εσωτερικές functions easing:

  • swing
  • linear

Προσφέρουν περισσότερες functions easing τα εκτεταμένα plugins.
callback

Προαιρετικό. Συνάρτηση που πρέπει να εκτελεστεί μετά την ολοκλήρωση της λειτουργίας animate.

Για να μάθετε περισσότερα για το callback, επισκεφθείτε τον jQuery Callback Αυτό το κεφάλαιο.

Γραμματική 2

$().animate(styles,options)
Παράμετροι Περιγραφή
styles Απαιτητικό. Καθορίζει τις CSS τάσεις και τις τιμές που προκαλούν την κίνηση (όπως παραπάνω).
options

Προαιρετικό. Καθορίζει πρόσθετες επιλογές για την κίνηση.

Πιθανές τιμές:

  • speed - ρυθμίζει την ταχύτητα της κίνησης
  • easing - καθορίζει τη συνάρτηση easing που πρέπει να χρησιμοποιηθεί
  • callback - καθορίζει τη συνάρτηση που πρέπει να εκτελεστεί μετά την ολοκλήρωση της κίνησης
  • step - καθορίζει τη συνάρτηση που πρέπει να εκτελεστεί μετά την ολοκλήρωση κάθε βήματος της κίνησης
  • queue - boolean. Ενδείκνυε αν η κίνηση πρέπει να τοποθετηθεί στη σειρά των κινήσεων. Αν είναι false, η κίνηση θα ξεκινήσει αμέσως
  • specialEasing - από styles Χάρτης μεταφοράς μιας ή περισσότερων CSS ιδιοτήτων και των αντίστοιχων functions easing

Οδηγός αναφορών jQuery αποτελεσμάτων