te recuerdo que
AJAX es
asíncrono, eso quiere decir que existe un ligero retardo desde que se envía la consulta al server y al obtener la respuesta, en ese entonces el efecto se ejecuta y después llega la data.
lo que debes hacer primero es lanzar el efecto al llegar la data

, en el onreadystatechange, lo que es para jQuery.ajax el
success