ToggleClass animate jQuery?

Question

Tôi có một phần trên trang web của tôi rằng khi người dùng nhấp Tôi muốn nó để mở rộng, tôi đang sử dụng của toggleClass cho điều này jQuery ...

expandable: function(e) { 
    e.preventDefault(); 
    $(this).closest('article').toggleClass('expanded', 1000); 
} 

này đang làm việc tốt, duy nhất tôi muốn bằng cách nào đó sinh động nó. Trong chrome bài viết của tôi từ từ phát triển đến kích thước mới, chỉ trong Firefox nó 'ngay lập tức' thay đổi kích thước chính nó không có hình ảnh động, là có một cách để có animate này?

Answer 1

jQuery UI mở rộng jQuery mẹ đẻ toggleClass để có một tham số tùy chọn thứ hai: duration

toggleClass(class, [duration]) 

Docs + DEMO

Answer 2

.toggleClass() sẽ không hoạt ảnh, bạn nên sử dụng phương thức slideToggle() hoặc .animate().

Answer 3

Bạn nên xem chức năng toggle được tìm thấy trên jQuery. Điều này sẽ cho phép bạn chỉ định một phương pháp nới lỏng để xác định cách thức hoạt động của công tắc.

slideToggle sẽ chỉ trượt lên và xuống, không trái/phải nếu đó là những gì bạn đang tìm kiếm.

Nếu bạn cần các lớp học để được toggled cũng bạn có thể deifine rằng trong toggle chức năng với:

$(this).closest('article').toggle('slow', function() { 
    $(this).toggleClass('expanded'); 
}); 

Answer 4

nên đã kiểm tra, Khi tôi bao gồm jQuery Thư viện giao diện người dùng nó làm việc tốt và được hiệu ứng động. ..

Answer 5

Bạn chỉ có thể sử dụng hiệu ứng chuyển tiếp CSS, xem this fiddle

.on { 
color:#fff; 
transition:all 1s; 
} 

.off{ 
color:#000; 
transition:all 1s; 
} 

Answer 6

tôi cố gắng sử dụng các phương pháp toggleClass để ẩn một mục trên trang web của tôi (sử dụng visibility: hidden như trái ngược với hiển thị: không) với một hoạt ảnh nhỏ, nhưng vì lý do nào đó hoạt ảnh sẽ không hoạt động (có thể do phiên bản cũ hơn của giao diện người dùng jQuery).

Lớp học đã bị xóa và thêm chính xác, nhưng thời lượng tôi thêm vào dường như không tạo ra bất kỳ sự khác biệt nào - mục được thêm hoặc xóa đơn giản không có hiệu lực.

Vì vậy, để giải quyết việc này tôi đã sử dụng một lớp thứ hai trong phương pháp chuyển đổi của tôi và áp dụng một sự chuyển tiếp CSS thay vì:

CSS:

.hidden{ 
    visibility:hidden; 
    opacity: 0; 
    -moz-transition: opacity 1s, visibility 1.3s; 
    -webkit-transition: opacity 1s, visibility 1.3s; 
    -o-transition: opacity 1s, visibility 1.3s; 
    transition: opacity 1s, visibility 1.3s; 
} 
.shown{ 
    visibility:visible; 
    opacity: 1; 
    -moz-transition: opacity 1s, visibility 1.3s; 
    -webkit-transition: opacity 1s, visibility 1.3s; 
    -o-transition: opacity 1s, visibility 1.3s; 
    transition: opacity 1s, visibility 1.3s; 
} 

Các JS:

function showOrHide() { 
     $('#element').toggleClass("hidden shown"); 
    } 

Cảm ơn @ tomas.satinsky cho câu trả lời tuyệt vời (và siêu đơn giản) trên this post.