jQuery: fadeout() non funziona su elemento posizionato in modo assoluto quando caricato tramite AJAX

Question

Sto usando AJAXify su un sito a cui sto lavorando per ottenere transizioni di pagina e sto vivendo un comportamento strano con jQuery.

Il mio codice:

HTML (io sto sparendo attraverso gli sfondi 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;} 

mio div sfuma in modo corretto quando Carico la pagina attraverso l'URL piuttosto che collegarmi ad esso tramite il collegamento AJAX (e ottengo l'avviso), tuttavia, quando mi collego ad esso attraverso la navigazione AJAXified, la dissolvenza non si verifica, tuttavia ricevo comunque l'avviso la funzione è fadeOut() sta sicuramente attivando.

Quando rimuovo il posizionamento assoluto dal CSS e il collegamento alla pagina tramite AJAX, il mio div si affievolisce man mano che ne ho bisogno (e ottengo l'avviso). Sembra solo che sia il problema con il posizionamento assoluto del div.

fadeIn() funziona correttamente con il posizionamento assoluto quando si collega a una pagina effettuata tramite AJAX o con un carico grave. È solo fadeOut che sta causando problemi.

Qualche suggerimento?

Answer 1

sono riuscito a risolvere questo semplicemente aggiungendo una larghezza al div. Bizarre

Answer 2

Prova ad aggiungere una durata alla funzione di fadeout che è molto grande, cioè 5-10 secondi. Se ancora non vedi la dissolvenza, puoi concentrarti un po 'di più sul css. Altrimenti, si sa che qualcosa si sta bloccando quando si usa Ajaxify, e il tuo fadeout viene attivato e completato prima che il rendering abbia luogo.

Siamo spiacenti, non posso commentare ancora domande - So che questa non è una risposta.

Answer 3

Se si utilizza lo AJAXify gist by Balupton (che sembra sia quello che si sta menzionando), allora dirò che ho riscontrato problemi durante il caricamento del codice Javascript tramite tale elenco. Puoi verificare che stai caricando alcun Javascript usando lo script? Prova a includere un Javascript su ciascuna delle tue pagine AJAXified che non fa altro che alert("hello");. Se non vedi il codice, scommetto che il tuo Javascript non sta nemmeno sparando. Se questo è il caso quindi provare questo codice, ha funzionato per me:

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