Cómo usar el efecto de diapositiva JQuery UI para deslizar un div y deslizarlo en otro div?

Question

estoy usando

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

a deslizarse fuera del div "Viewport", y en la función de devolución de llamada() Estoy deslizamiento en el nuevo div en la pantalla llamando

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

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

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

El problema es que no es una transición perfecta: primero el contenido se desliza dejando atrás un área en blanco y luego se desliza el nuevo contenido.

¿Hay alguna manera de evitar la pantalla en blanco?

Answer 1

Es porque está llamando al efecto en # viewPort2 en la devolución de llamada al efecto de #viewPort. Eso significa que ocurrirá solo una vez que el efecto en #viewPort haya finalizado por completo. Intente llamar el efecto en # viewPort2 justo después de uno en #viewPort, por ejemplo:

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