jQuery añadir fadeIn

97

Similar a: Uso de fadein y append

Pero las soluciones no me funcionan. Lo estoy intentando:

 $('#thumbnails').append('<li><img src="/photos/t/'+data.filename+'"/></li>').hide().fadeIn(2000);

Pero luego la lista completa se desvanece de una vez, no cuando se agrega cada elemento. Parece hide()yfadeIn() se está aplicando $('#thumbnails')no al <li>. ¿Cómo conseguiría que se aplicaran a eso? Esto tampoco funciona:

$('#thumbnails').append('<li stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>').filter(':last').fadeIn(2000);

¿Otras sugerencias?

jquery mpen
fuente

Respuestas:

199

Su primer intento está muy cerca, pero recuerde que append()está regresando #thumbnails, no el elemento que acaba de agregar. En su lugar, construya su artículo primero y aplique el hide().fadeIn()antes de agregarlo:

$('#thumbnails')
    .append($('<li><img src="/photos/t/'+data.filename+'"/></li>')
        .hide()
        .fadeIn(2000)
    );

Esto usa la función dólar para construir el <li>antes de tiempo. También puede escribirlo en dos líneas, por supuesto, si eso lo aclara:

var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>')
    .hide()
    .fadeIn(2000);
$('#thumbnails').append(item);

Editar: Tu segundo intento también está casi listo, pero necesitas usar en children()lugar de filter(). Este último solo elimina los nodos de la consulta actual; su elemento recién agregado no está en esa consulta, sino que es un nodo secundario.

$('#thumbnails')
    .append('<li stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>')
    .children(':last')
    .hide()
    .fadeIn(2000);
Ben Blank
fuente
1
¡Hermoso! Funciona perfectamente. No sabría cómo retrasar el inicio del desvanecimiento hasta que la miniatura haya terminado de cargarse también, ¿verdad?
mpen
No en la parte superior de mi cabeza, pero "cómo puedo activar una función cuando una imagen termina de cargarse" no es una mala idea para una pregunta separada. ;-)
Ben Blank
Lo sé, pensé que eras tan inteligente que podíamos matar dos pájaros de un tiro: p Oh, bueno, Google proporcionó una solución. Gracias de nuevo :)
mpen
Si todavía tiene el enlace a mano, me encantaría ver la técnica.
Ben Blank
1
gracias por el ejemplo! Es styleno stle :)
msroot
45 
$('<li><img src="/photos/t/'+data.filename+'"/></li>')
    .appendTo('#thumbnails')
    .hide().fadeIn(2000);
Roman Sklyarov
fuente
4
Sneaky ... invirtiendo el orden. Me gusta.
mpen
30

La respuesta de Ben Blank es buena, pero el desvanecimiento, para mí, es defectuoso. Intente desvanecerse después de agregar:

var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>').hide();
$('#thumbnails').append(item);
item.fadeIn(2000);
Derek Illchuk
fuente
1
Estoy completamente de acuerdo, este enfoque evitará el renderizado de un cuadro que causará un parpadeo ... solo un poco más de delicadeza
Paul Carroll
Gracias, esto solucionó un problema técnico en el que el diseño / posicionamiento del elemento que estaba a punto de aparecer era inconsistente al hacer ambos al mismo tiempo.
frax
3

¡Intentalo!

 $('#thumbnails').append(<li> your content </li>);
 $('#thumbnails li:last').hide().fadeIn(2000);
Ogait
fuente
2

Prueba esto:

$('<li><img src="/photos/t/'+data.filename+'"/></li>').hide().appendTo('#thumbnails').fadeIn(2000);
Wessam El Mahdy
fuente
0

Aquí está la solución con la que fui:

function onComplete(event, queueID, fileObj, response, info) {
    var data = eval('(' + response + ')');
    if (data.success) {
        $('#file-' + queueID).fadeOut(1000);
        var img = new Image();
        $(img).load(function () { // wait for thumbnail to finish loading before fading in
            var item = $('<li id="thumb-' + data.photo_id + '"><a href="#" onclick="deletePhoto(' + data.photo_id + ')" class="delete" alt="Delete"></a><a href="#" class="edit" alt="Edit"></a><div class="thumb-corners"></div><img class="thumbnail" src="/photos/t/' + data.filename + '" width=150 height=150/></li>');
            $('#thumbnails').append(item.hide().fadeIn(2000));).attr('src', '/photos/t/' + data.filename);
        } else {
            $('#file-' + queueID).addClass('error');
            //alert('error ' + data.errno); // TODO: delete me
            $('#file-' + queueID + ' .progress').html('error ' + data.errno);
        }
    }
}

Esto funciona con uploadify . Utiliza el loadevento de jquery para esperar a que la imagen termine de cargarse antes de que aparezca. No estoy seguro de si este es el mejor enfoque, pero funcionó para mí.

mpen
fuente