jQuery: fadeout() nie działa na pozycjonowanym absolutnie elemencie po załadowaniu przez AJAX

Question

Używam AJAXify na stronie, nad którą pracuję, aby uzyskać przejścia między stronami i doświadczam dziwnego zachowania z jQuery.

Mój kod:

HTML (jestem blaknięcie przez tła z 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;} 

Moje div zanika poprawnie gdy Ładuję stronę przez adres URL, a nie łączę się z nią za pośrednictwem linku AJAX (i otrzymuję alert), jednak po podłączeniu do niego przez nawigację AJAXified, zanikanie nie nastąpi, ale wciąż otrzymuję alert, więc funkcja jest fadeOut() zdecydowanie wyzwala.

Kiedy usuwam bezwzględne pozycjonowanie z CSS i link do strony poprzez AJAX, mój div znika, gdy jest mi potrzebny (i otrzymuję alert). Wydaje się, że tylko powoduje to problem z absolutnym pozycjonowaniem elementu div.

Funkcja fadeIn() działa poprawnie z pozycjonowaniem bezwzględnym podczas łączenia z wywołaną stroną za pośrednictwem AJAX lub z dużym obciążeniem. To właśnie fadeOut powoduje problemy.

Wszelkie sugestie?

Answer 1

udało mi się rozwiązać ten problem poprzez dodanie szerokości do div. Bizarre

Answer 2

Spróbuj dodać czas trwania funkcji fadeout, która jest naprawdę duża, tj. 5-10 sekund. Jeśli nadal nie widzisz zanikania, możesz skupić się na css nieco więcej. W przeciwnym razie wiesz, że coś się zawiesza podczas używania Ajaxify, a twoje przenikanie jest wyzwalane i kończone przed renderowaniem.

Niestety, nie mogę jeszcze komentować pytań - wiem, że to nie jest odpowiedź.

Answer 3

Jeśli używasz AJAXify gist by Balupton (o czym wydaje się, że właśnie o tym wspominałeś), powiem, że napotkałem problemy z ładowaniem kodu JavaScript przez ten fragment. Czy możesz sprawdzić, czy w ogóle ładujesz jakąkolwiek obsługę JavaScript za pomocą skryptu? Spróbuj włączyć Javascript na każdej ze swoich AJAXified stron, które nie robią nic więcej niż alert("hello");. Jeśli nie widzisz kodu, to założę się, że Twój JavaScript nie uruchamia się nawet. Jeśli to przypadek następnie spróbuj tego kodu, pracował dla mnie:

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