I have an absolutely positioned child inside a relatively positioned container with the following style:
.child {
display: inline-block;
position: absolute;
right: 0;
width: 551px;
height: 132px;
}
...and the markup:
<div id="child" class="child">
<!-- a div here -->
<!-- an image here -->
</div>
It's been showing up without problems while I've been messing around with the layout. But I only want this child element to be visible when I hover over another element. So, when my page loads I run the following jQuery:
$('.child').hide(); // which should preserve the inline-block display value
$('#target').hover(function() {
$('#something').fadeOut(function() {
$('#child').fadeIn();
});
}, function() {
$('#child').fadeOut(function() {
$('#something').fadeIn();
});
});
When the hide function is called, the child element has an inline style added which is display: none like I would expect. But when the fadeIn function is called on the child, the inline style display value is set to block, which breaks my layout (it should be inline-block).
I thought jQuery always preserves the display value of an element when hide is used, in fact I'm relying on that in a number of other situations. Why is it not working here?
For what it's worth, I'm using jQuery v2.1.1
Edit:
From the jQuery docs regarding the hide function:
This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.
This is not happening for me. The question I'm asking is why this could be happening. Also, the other question is dealing with simple hiding and showing of elements. If I set the display value manually to inline-block before attempting the fadeIn, I might end up with the element flickering before the fade starts.
