Hướng dẫn toggle css jquery

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học jQuery
  • .toggle()

Định nghĩa và sử dụng

  • .toggle() hiển thị và ẩn các thành phần phù hợp.
  • Việc hiển thị và ẩn được luân phiên nhau giữa các lần action (VD action Click).

Cấu trúc

.toggle(Độ bền)

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

$('p').toggle(300);
$('p').toggle(fast);

.toggle(Độ bền,'easing')

Độ bền có thể bằng số hoặc bằng chữ: slow, fast.

Easing có thể sử dụng swing hoặc linear

$('p').toggle(300,'swing');

Bài học chỉ muốn cho bạn hiểu cách sử dụng .toggle, muốn biết chi tiết hơn, bạn có thể xem chi tiết thêm tại phần tham khảo.

.toggle(Độ bền)

Html viết:





Tiêu đề






  

toggle(2000)

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery


toggle(2000)


toggle(2000)

.toggle(Độ bền,function(){...})

Html viết:





Tiêu đề






  

Thành phần div

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button, sau khi hoàn thành hiệu ứng sẽ hiển thị nội dung bên trong function.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery


Thành phần div


Thành phần div

.toggle(Độ bền,'easing')

Html viết:





Tiêu đề






  

toggle swing
toggle linear

Hiển thị trình duyệt:

Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuerySau khi có jQuery


toggle swing

toggle linear


Nội dung mới

Nội dung mới