Tengo un gran bloque de HTML que necesita ser reemplazado, que incluye transiciones fadeOut / fadeIn. No puedo entender cómo agregar el HTML a la página (oculto) sin envolverlo en un div.

$.get('/ajax', function(newHtml){
    var $newEvent = $('<div class="new-event" />').hide().html(newHtml);
    $('#content .event').fadeOut('slow', function(){
        $(this).remove(); //old event
        $newEvent.appendTo('#content').fadeIn('slow').removeClass('new-event'); //then remove the wrapper div that I didnt need in the first place
    });
});

¿Cuál es la mejor manera de hacer esto mientras se utilizan las mejores prácticas para el rendimiento?

Solución:

Por alguna razón, pensé que crear un nuevo elemento como este: $(newHtml) era menos eficiente (mal rendimiento) que html(newHtml). Pero aparentemente, son lo mismo en cuanto al rendimiento (no tengo datos para respaldar esto aparte de mis propias observaciones).

Entonces, el siguiente código es tan eficiente como el anterior:

$.get('/ajax', function(newHtml){
    var $newEvent = $(newHtml).hide();
    $('#content .event').fadeOut('slow', function(){
        $(this).remove(); //old event
        $newEvent.appendTo('#content').fadeIn('slow');
    });
});
2
Andrew 14 sep. 2011 a las 22:24

4 respuestas

La mejor respuesta

Cuando agregue el código a la página, haga que todos los elementos de nivel superior estén ocultos.

<div style="display:none;">...</div>

Cuando fadeIn se llama jQuery lo elimina automáticamente por usted.

Si no puede modificar el html devuelto, hágalo de esta manera,

$(newHtml).hide().appendTo('#content');

Eso lo ocultará antes de agregarlo al DOM.

1
Andrew 14 sep. 2011 a las 19:03

Simplemente podría tenerlo como una cadena de JavaScript y agregarlo cuando lo necesite.

var $newEvent = $(newHtml);
// and later on
$( '#content .event' ).fadeOut('slow', function ()
{
    $(this).append($newEvent).fadeIn( 'slow' );
});
0
fredrik 14 sep. 2011 a las 18:31

¿Por qué no simplemente reemplaza el contenido de .event en lugar de eliminarlo y crear uno nuevo?

$.get( '/ajax', function( newHtml )
{
    $( '#content .event' ).fadeOut( 'slow', function ()
    {
        $( this ).html( newHtml ).fadeIn( 'slow' );
    });
});

Editar

Si realmente necesita eliminar todo el nodo, puede hacerlo

$( this ).remove();
$( '<div class="new-event">' ).appendTo( $('#content') ).html( newHtml ).fadeIn( 'slow' );
1
Jose Faeti 14 sep. 2011 a las 18:48

¿Qué tal algo como

$('#content .event').fadeOut('slow', function()
{
    $(this).html(newHtml).fadeIn('slow');
});
1
Joe 14 sep. 2011 a las 18:27