cómo animar a jquery load()

hola im usando este código para cargar contenido de otro archivo php.cómo animar a jquery load()

esto funciona correctamente pero quiero que el script se desvanezca en cada "li" cuando se agrega un nuevo registro, ¿alguien?

lo que quiero hacer es algo así como la alimentación en vivo la acción del usuario de Facebook que en la parte superior derecha de la Página principal

Fuente

2011-12-13 Ali Poder

Puede usar 'display: none' u' opacity: 0' en CSS y hacer una animación jQuery normal. – FakeRainBrigand

han intentado éste?

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

hmmm, ¿qué pasa con éste

$(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); 

});

Fuente

2011-12-13 18:03:55

sí, todavía no pasó nada –

hmm, he intentado mi segundo código, eso funciona para mí, pero no sé si ese trabajo también para usted –

¿y si se llama al método fadeIn

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

Fuente

2011-12-13 18:04:03 Shyju

nada cambia –

intentar algo como esto:

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

});

Nota el uso de fadeIn() y hide() ... No es necesario ocultarlo si ya tiene el <li> escondido.

Fuente

2011-12-13 18:06:28 sirmdawg

probé esto, pero toda li está parpadeando cada 1 segundo –

Eso es porque usaste el selector '.live-steam ul'. Estás seleccionando cada li y haciéndolo al mismo tiempo. ¿Estabas buscando un efecto diferente? – sirmdawg

gestor de llamadas durante la carga de

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

    });

Fuente

2011-12-13 18:07:09

no funciona: /. –

$ (this) se muestra antes de la .fadeIn ("1000") será ejecutado. En primer lugar tiene que ocultar el elemento seleccionado, cargar el contenido y luego fadeIn, así:

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

});

u ocultar los elementos con CSS:

display: none;

EDIT: debe ser algo como esto, pero que no está probado ...

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

Fuente

2011-12-13 18:11:19

cuando hago esto todos los li's están parpadeando cada 1 segundo –

@Ronnie Chester Lynwood Eso es debido a su setInterval(). Llamas a la función cada segundo;) ¿Qué es exactamente lo que quieres hacer? –

Estoy tratando de hacer algo como la acción de Facebook de usuario en vivo que en la parte superior derecha de Facebook –

utilizar la devolución de llamada pero esconder el uso de CSS li display: none; fadeIn debería funcionar después de eso.

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

    });

Fuente

2011-12-13 18:27:38 shaunsantacruz

¿Hay alguna forma de usar setInterval solo para li's no toda? –

Primero tiene que ocultarlo.

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

Fuente

2013-01-22 12:49:30 Andri

genial, esto funciona a la perfección –

No creo que se pueda usar animación directamente en load(). Pero aquí está el truco que utilicé:

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

El elemento no se muestra, simplemente se vuelve transparente. Se ve igual.

Fuente

2014-10-08 06:11:14

cómo animar a jquery load()

Respuesta

Cuestiones relacionadas