jQuery: fadeout() no funciona en el elemento absolutamente posicionado cuando se carga a través de AJAX

Question

Estoy usando AJAXify en un sitio en el que estoy trabajando para lograr transiciones de página y estoy experimentando un comportamiento extraño con jQuery.

Mi código:

HTML (estoy desapareciendo a través de los fondos con jQuery)

<div id="backgrounds"> 
<img src="/assets/Uploads/hpbg3.jpg" alt="" class="bodybackground"> 
<img src="/assets/Uploads/hpbg2.jpg" alt="" class="bodybackground"> 
<img src="/assets/Uploads/hpbg4.jpg" alt="" class="bodybackground"> 
<img src="/assets/Uploads/hpbg5.jpg" alt="" class="bodybackground"> 
</div> 

jQuery

$('.otherClass').each(function() { 
     $('#backgrounds').fadeOut(function(){ 
       alert('fade'); 
      }); 
}); 

$('#main .container.homepageClass').each(function() { 
     $('#backgrounds').fadeIn(); 
}); 

CSS

#backgrounds {display: none; position: absolute; left: 50%; margin-left: -714px;} 

Mi div desvanece a cabo correctamente cuando Cargué la página a través de la URL en lugar de vincularla a través del enlace AJAX (y recibo la alerta), sin embargo, cuando me conecto a ella a través de la navegación AJAXified, el desvanecimiento no ocurre, sin embargo, sigo recibiendo la alerta por lo la función es fadeOut() definitivamente está activando.

Cuando elimino el posicionamiento absoluto del CSS y el enlace a la página a través de AJAX, mi div se desvanece cuando lo necesito (y obtengo la alerta). Solo parece estar causando el problema con el posicionamiento absoluto del div.

El fadeIn() funciona correctamente con el posicionamiento absoluto cuando se vincula a una página afectada a través de AJAX o con una carga dura. Es solo fadeOut que está causando problemas.

¿Alguna sugerencia?

Answer 1

Me las arreglé para resolver esto simplemente agregando un ancho a la div. Bizarre

Answer 2

Intente agregar una duración a su función de fadeout que es realmente grande, es decir, 5-10 segundos. Si aún no ves el fadeout, entonces puedes enfocarte un poco más en el CSS. De lo contrario, sabrá que algo se está estancando cuando use Ajaxify, y su fadeout se activará y completará antes de que se realice la reproducción.

Lo sentimos, no podemos comentar preguntas todavía - Sé que esta no es una respuesta.

Answer 3

Si está utilizando el AJAXify gist by Balupton (que parece que es lo que está mencionando) entonces diré que he tenido problemas al cargar el código de Javascript a través de esa esencia. ¿Puedes verificar que estés cargando el Javascript utilizando el script? Intente incluir un Javascript en cada una de sus páginas AJAXified que no haga más que alert("hello");. Si no ves el código, apostaría a que tu Javascript ni siquiera está en marcha. Si ese es el caso, pruebe este código, funcionó para mí:

$scripts.each(function(){ 
    var $script = $(this), scriptText = $script.text(); 
    scriptText = "<script>" + scriptText + "</script>"; 
    contentHtml += scriptText; 
});