Bài viết sưu tầm

jQuery cung cấp 1 số các effects đơn giản để làm đẹp cho trang của bạn. Các effects có thể sử dụng các thiết lập có sẵn hoặc tùy chỉnh. Bạn cũng có thể tạo các animations tùy chỉnh dựa vào các thuộc tính CSS.

Một lưu ý quan trọng về animations: Trong các trình duyệt hiện đại, đặc biệt là trên các thiết bị di động, để đạt được hiệu quả cao hơn khi dùng animations, người ta sử dụng CSS thay cho JavaScript.

Các effects xây dựng sẵn

Các effects thường sử dụng được xây dựng trên jQuery giống như các methods mà bạn có thể gọi trên bất kỳ đối tượng jQuery nào:

.show() // Show các elements đã chọn.

  .hide () // Hide các elements đã chọn.

  .fadeIn() // Animate opacity của elements đã chọn thành 100%.

  .fadeOut() // Animate opacity của elements đã chọn thành 0%.

  .slideDown() // Hiển thị các elements đã chọn theo vertical sliding motion

  .slideUp() // Ẩn các elements đã chọn theo vertical sliding motion

  .slideToggle() // Hiển thị hoặc ẩn các elements đã chọn theo vertical sliding motion, tùy thuộc vào việc có nhìn thấy được elements hay không.

Khi bạn đã có lựa chọn của mình, hãy áp dụng effect cho nó.

$( '.hidden' ).show();

Bạn cũng có thể xác định khoảng thời gian của các effects được xây dựng sẵn. Có hai cách để làm điều này: xác định thời gian bằng mili giây

$( '.hidden' ).show( 300 );

hoặc dùng các định nghĩa về tốc độ

$( '.hidden' ).show( 'slow' );

Tốc độ được định nghĩa trước được xác định trong đối tượng jQuery.fx.speeds; bạn có thể thay đổi đối tượng này bằng giá trị mặc định của nó, hoặc extend nó với một cái tên mới:

// re-set an existing predefined speed

  jQuery.fx.speeds.fast = 50;

  // create a new pre-defined speed

  jQuery.fx.speeds.turtle = 3000;

  // Since we've re-set the 'fast' speed, this will now animate over the

  // course of 50 milliseconds

  $( '.hidden' ).hide( 'fast' );

  // After they are created, we can use custom speeds just as we use the

  // built-in speeds

  $( '.other-hidden' ).show( 'turtle' );