.fadeOut () inside a hidden element - possible error?

Question

Given the following code :

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

and

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

I would expect both .hotel_photo_select divs to be hidden. However, the second is not hidden when I show the container.

Is this a jQuery bug? Each item must be hidden after fadeOut ().

The only solution, I think, would be this:

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

What I find less elegant.

Answer 1

Technically, for this type of method you need to use '.each ()'. Then also add a breakpoint where we determine if the parent is visible, if it is not visible, then we make it visible.

However, making a parent visible can have a negative effect on your layout, YES. But there is no better way to do this, and therefore you should avoid such situations.

Real-time example: 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

As already mentioned, "Boo", since the current state of the second "hi" div is "hidden", jQuery.fadeOut () will not apply any animation to it.

Instead of saying “fade me out for me”, you need to say “animate opacity to zero”. In this case, jQuery does not care if your element will be visible or not. he will do the job:

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

see here: http://jsfiddle.net/QMSzg/20/

Answer 3

jQuery.fadeOut converts elements from its current state to the state you want to use, in this case hidden. If the element is already hidden (as in the second case), jQuery does not need to perform any actions. What you could do is set the css mapping to none:

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

Answer 4

put show () before fadeout ()

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

Answer 5

I had the same problem. My solution was to hide the element as a callback function:

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

Thus, if the element is hidden, the call will be called immediately.