Jquery slideToggle hiệu lực thi hành không mịn

Question

<div class="searchDiv"> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
</div> 

Tôi cố gắng để gọi $("div.searchDiv").slideToggle("slow"); trên div với lớp searchDiv được ẩn ban đầu sử dụng display:none. Có một số phần tử div bên trong 4 div đó với lớp row. Có quan trọng như thế nào các yếu tố được đặt bên trong div chính searchDiv bởi vì tôi thấy rằng các hiệu ứng chuyển đổi không phải là mịn cho các yếu tố được đặt bên trong div chính.

Answer 1

Ý tưởng có điều gì đó trông mượt mà hay không là ý kiến ​​và khác biệt dựa trên ai đang xem nó. Nếu bạn đang sử dụng chậm nó là một cho nó một giá trị của 200 mili giây.

SlideToggle. https://api.jquery.com/slideToggle/

Thời lượng được tính bằng mili giây; các giá trị cao hơn cho biết hình động chậm hơn, không phải các giá trị nhanh hơn. Các chuỗi 'nhanh' và 'chậm' có thể được cung cấp để cho biết thời lượng tương ứng là 200 và 600 mili giây.

Việc nới lỏng mặc định là xoay và đối với tôi, có vẻ thô. Tôi sẽ đề nghị cố gắng tuyến tính cho việc nới lỏng.

Nếu xoay hoặc tuyến tính không đủ mượt cho bạn, bạn có thể sử dụng và bao gồm giao diện người dùng jQuery và sử dụng một trong các tùy chọn khác. Bạn có thể tìm thấy các nới lỏng mà bạn nghĩ rằng hoạt động trơn tru như bạn cần.
http://jqueryui.com/resources/demos/effect/easing.html

$('.searchDiv').slideToggle(2000,"linear", function() { 
    // actions to do when animation finish 
}); 

Answer 2

Bạn cần phải thêm Width hàng của bạn.

jQuery không biết kích thước của div ẩn của bạn cho đến khi nó được hiển thị. Vì vậy, khi nó được nhấp vào nó thực sự kéo nó ra khỏi vị trí để đo nó trước khi nhanh chóng thay thế nó. Điều này thường có tác dụng phụ gây ra một số sự tăng vọt. Đặt chiều rộng trên phần tử ngăn jQuery kéo nó ra khỏi vị trí.

Answer 3

Tôi biết điều này là cũ nhưng trong trường hợp nó giúp bất cứ ai khác, tôi đã tìm thấy sự cố khi tôi đặt thuộc tính độ cao tối thiểu trên phần tử được bật, cài đặt ở độ cao cố định đã giải quyết vấn đề này cho tôi.

Answer 4

Tôi gặp sự cố tương tự. Hai thứ đã sửa nó cho tôi.

1. Tôi cần phải xóa css chuyển tiếp hiện tại trên phần tử của mình.
2. Tôi đã có một yếu tố bên trong "thanh click" của tôi (h2) mà cần lề thiết lập là 0. (nó đã làm cho các yếu tố khác động đến ranh giới sai - gây một snap lạ ở cuối)