Làm cách nào để sử dụng hiệu ứng trang trình bày JQuery UI để trượt liên tục một div và trượt trong div khác?

Question

Tôi đang sử dụng

$("#viewPort").effect("slide", hideoptions, 1000, callback) 

để trượt ra "khung nhìn" div, và trong callback() chức năng tôi trượt trong div mới vào màn hình bằng cách gọi

$("#viewPort2").effect("slide", showoptions, 1000) 

var hideoptions = { "direction" : "left", "mode" : "hide"; 

var showoptions = {"direction" : "right","mode" : "show"}; 

Vấn đề là rằng nó không phải là quá trình chuyển đổi liền mạch: đầu tiên nội dung sẽ xuất hiện để lại sau một vùng trống, sau đó nội dung mới sẽ xuất hiện.

Có cách nào để tránh màn hình trống không?

Answer 1

Đó là vì bạn đang gọi hiệu ứng trên # viewPort2 trong gọi lại đến hiệu ứng của #viewPort. Điều đó có nghĩa là nó sẽ chỉ xảy ra khi hiệu ứng trên #viewPort đã hoàn tất. Hãy thử gọi hiệu ứng này trên # viewPort2 ngay sau hiệu ứng trên #viewPort, ví dụ:

$("#viewPort").effect("slide", hideoptions, 1000); //notice, no callback 
$("#viewPort2").effect("slide", showoptions, 1000);