JQUERY 04 – EFFECTS trong Jquery

0
103

Thư viện Jquery cung cấp cho chúng ta một số kỹ thuật để thêm các hiệu ứng động vào website. Chúng bao gồm các hiệu ứng đơn giản nhưng được sử dụng thường xuyên ngoài ra chúng ta có thể tùy chỉnh để tạo ra các cái hiệu ứng phức tạp.

Trong bài này chúng ta sẽ tìm hiểu một số hiệu ứng sau.

  • Hiệu ứng Hide/Show
  • Hiệu ứng Fade
  • Hiệu ứng Animate
  • Hiệu ứng Slide

1. Hiệu ứng Hide/Show

Hiệu ứng hide/show cho phép chúng ta ẩn hiển một phần tử html.

Cú pháp

Ví dụ

See the Pen VzEqVq by Cao Anh Nhất (@xeko995) on CodePen.dark

2. Hiệu ứng Fade

Hiệu ứng Fade cho phép chúng ta làm ẩn hiển phần tử HTML bằng chuyển động mờ dần.

Cú pháp

Trong đó

  • fadeIn() : Hiển thị phần tử HTML đang bị ẩn
  • fadeOut() : Ẩn phần tử HTML đang hiển thị
  • fadeToggle() : Là sự kết hợp của fadeIn()fadeOut() nó sẽ hiện phần tử nếu phần tử đang ẩn và ngược lại
  • fadeTo() : giới hạn độ mờ nhất định cho một phần tử HTML
  • speed : Tốc độ ẩn hiển được tính bằng mili giây. Ngoài ra các bạn có thể để trống nếu muốn sử dụng giá trị mặc định.
  • opacity : Độ mờ của phần tử HTML trong khoảng từ 0 ~ 1.

Ví dụ

See the Pen XaxOKY by Cao Anh Nhất (@xeko995) on CodePen.dark

3. Hiệu ứng Slide

Hiệu ứng slide cho phép chúng ta ẩn hiển phần tử HTML bằng chuyển động trượt.

Cú pháp

Trong đó

  • slideUp: Ẩn một phần tử HTML với hiệu ứng trượt lên
  • slideDown : Hiển thị một phần tử HTML với hiệu ứng trượt xuống
  • slideToggle : Kết hợp slideUpslideDown . 
  • speed : Tốc độ ẩn hiện của chuyển động. Được tính bằng mili giây

Ví dụ

See the Pen LjgqOK by Cao Anh Nhất (@xeko995) on CodePen.dark

4. Hiệu ứng Animate

Với hiệu ứng Animate thì chúng ta có thể tùy chỉnh một loạt các thuộc tính của CSS

Cú pháp

Trong đó:

  • params : Đối tượng CSS
  • speed : Tốc độ thay đổi được tính bằng mili giây

Ví dụ

See the Pen QMZYBa by Cao Anh Nhất (@xeko995) on CodePen.dark

*Note: Phương thức animate thường sử dụng cho các thuộc tính liên quan đến : độ dài, vị trí, độ trong suốt …

Đã kết thúc bài học về các hiệu ứng trong jquery, các bạn có thể tham khảo các bài viết khác tại đây:

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here