.fadeOut() dentro de un elemento oculto: ¿posible error?

Question

Dada la following code:

<div class='hotel_photo_select'> 
    Hello 
</div> 

<div class='itsHidden' style='display:none'> 
    <div class='hotel_photo_select'> 
     Hello 
    </div> 
</div> 

Y:

$('.hotel_photo_select').fadeOut(300); 
$('.itsHidden').show(); 

Yo esperaría tanto .hotel_photo_select divs que se oculta. Sin embargo, el segundo no está oculto cuando muestro el contenedor.

¿Es esto un error de jQuery? Todos los elementos deberían ocultarse después de fadeOut().

La única solución que creo que será la siguiente:

$('.hotel_photo_select').fadeOut(300, function() { 
    $(this).hide(); 
}); 
$('.itsHidden').show(); 

que me parece ser menos que elegante.

Answer 1

Técnicamente, para este tipo de método es necesario utilizar '.cada()'. Luego también permite agregar un punto de control, donde determinamos si el padre es visible, si no está visible, entonces lo hacemos visible.

Sin embargo, hacer que el padre sea visible, podría tener un efecto negativo en su diseño, SÍ. Pero no hay mejor manera de hacerlo, y por lo tanto debe evitar este tipo de situaciones.

ejemplo vivo: http://jsfiddle.net/QMSzg/21/

$('.hotel_photo_select').each(function() { 
    var this_parent = $(this).parent('div'); 
    if (this_parent.is(':hidden')) { 
     this_parent.show(); 
    } 
    $(this).fadeOut(500); 
}); 

Answer 2

jQuery.fadeOut transforma elementos de su estado actual al estado que desea adoptar, en este caso oculto. Si el elemento ya está oculto (como ocurre con la segunda ocurrencia), jQuery no necesita realizar ninguna acción. Lo que podría hacer se establece específicamente la pantalla css incomparables:

$('.itsHidden .hotel_photo_select').css('display','none'); 

Answer 3

Como "Boo" ya se ha mencionado, debido a que el estado actual de la segunda div "hola" es "oculto" jQuery.fadeOut() no se aplicará cualquier animación en él.

En lugar de decir "desvanecerse para mí", debe decir "animar la opacidad a 0". En este caso, a jQuery no le importará si su elemento es visible o no. que va a hacer es el trabajo:

$('.hotel_photo_select').animate({opacity:0}, 3000); 

lo ve aquí: http://jsfiddle.net/QMSzg/20/

Answer 4

lugar el show() antes de que el desvanecimiento()

$('.itsHidden').show(); 
$('.hotel_photo_select').fadeOut(300); 

Answer 5

Yo tenía el mismo problema. Mi solución era ocultar el elemento como una función de devolución de llamada:

$('.hotel_photo_select').fadeOut(300, function(){ 
    $('.hotel_photo_select').hide(); 
}); 

De esta manera si el elemento está oculto, la devolución de llamada se llamará de inmediato.