come animare jquery load()

Question

ciao im usando questo codice per caricare il contenuto da un altro file php.

$(document).ready(function(){ 
      setInterval(function(){ 
           $('.live-stream ul').each(function(){ 
            $(this).load('tx.php'); 
         }); 
       }, 1000); 

     }); 

questo funziona correttamente, ma voglio script per fadeIn ogni "li" quando un nuovo record aggiunto, chiunque?

la cosa che voglio fare è qualcosa di simile avanzamento dell'azione di facebook live utente in alto a destra della casa facebook

Answer 1

avete provato questo?

$(document).ready(function(){ 
    setInterval(function(){ 
     $('.live-stream ul').each(function(){ 
      $(this).load('tx.php').fadeIn('1000'); 
     }); 
    }, 1000); 
}); 

hmmm, che dire di questo

$(function(){ 
//Fade in all objects. 
var wrapper = $("live-stream ul"); 
$(wrapper).hide(); 

function fadeInAll(elem, fadeInTime, timeBetween) 
{ 
    for(i=0; i<elem.size(); i++) 
    { 
     $(elem[i]).delay(i*(timeBetween+fadeInTime)).fadeIn(fadeInTime);  
    } 
} 

fadeInAll($(wrapper), 1000, 500); 

}); 

Answer 2

cosa succede se si chiama il metodo fadeIn

$(this).load('tx.php').fadeIn(400); 

Answer 3

provare qualcosa di simile:

$(document).ready(function(){ 
    setInterval(function(){ 
     $('.live-stream ul').each(function(){ 
      $(this).hide().load('tx.php').fadeIn('500'); 
     }); 
    }, 1000); 

}); 

Nota l'uso di fadeIn() e hide() ... Non è necessario nascondere se hai già il <li> nascosto.

Answer 4

gestore chiamata durante il caricamento

$(document).ready(function(){ 
    setInterval(function(){ 
     $('.live-stream ul').each(function(){ 
       $(this).load('tx.php', function(){ 
         $('li').fadeIn("normal"); 
          }); 
       }); 
     }, 1000); 

    }); 

Answer 5

$ (this) viene visualizzato prima del .fadeIn ("1000") verrà eseguito. Prima di tutto bisogna nascondere l'elemento selezionato, caricare il contenuto e poi fadeIn, in questo modo:

$(document).ready(function(){ 
    setInterval(function(){ 
     $('.live-stream ul').each(function(){ 
      $(this).hide().load('tx.php').fadeIn("1000"); 
     }); 
    }, 1000); 

}); 

o nascondere gli elementi con i CSS:

display: none; 

EDIT: dovrebbe essere qualcosa di simile, ma non è testato ...

$(document).ready(function(){ 
    setInterval(function(){ 
     var streamListElement = $(document.createElement("li")).load('tx.php').hide(); 
     $('.live-stream ul').append(streamListElement).find(":hidden").fadeIn("3000"); 
    }, 1000); 
}); 

Answer 6

utilizzare la richiamata, ma nascondere la Li usando i CSS display: none; fadeIn dovrebbe funzionare dopo.

$(document).ready(function(){ 
    setInterval(function(){ 
     $('.live-stream ul').each(function(){ 
       $(this).load('tx.php', function(){ 
         $(this).find('li').fadeIn(); 
          }); 
       }); 
     }, 1000); 

    }); 

Answer 7

Devi nasconderlo prima.

$(this).hide().load("tx.php").fadeIn('500'); 

Answer 8

Non penso che sia possibile utilizzare l'animazione direttamente su load(). Ma qui è il trucco che ho usato:

$("#id").animate({opacity: 0},1000); 
$("#id").load(url); 
$("#id").animate({opacity: 1},1000); 

L'elemento non viene visualizzato, appena diventa trasparente. Sembra lo stesso.