After jquery fadeout () - element keeps height of hidden element in google chrome
I am losing the element on mousehover / mouseleave
function hoverIn() {
$(this).find('a').addClass('megadropdown-expanded');
var activeitem = $(this).data("mlid");
$('.paddle-mega-dropdown[data-mlid=' + activeitem + ']').fadeIn("fast");
}
function hoverOut(e) {
var activeitem = $(this).data("mlid");
var targetElement = e.relatedTarget;
if ($(targetElement).closest('[data-mlid=' + activeitem + ']').length == 0) {
$('.paddle-mega-dropdown[data-mlid=' + activeitem + ']').fadeOut("fast").css("position", "absolute");
$('.menu-item[data-mlid=' +activeitem + ']').find('a').removeClass('megadropdown-expanded');
}
}
everything worked fine until i removed position: absolute
from the element. (I keep it under normal document flow under small screens)
.paddle-mega-dropdown {
box-shadow: 0px 5px 13px 0px rgba(50, 50, 50, 0.36);
display: none;
overflow: hidden;
background: #fff;
border-radius: 0 0 3px 3px;
padding-top: 30px;
z-index: 100;
}
Now, in Google Chome, when I do hoverOut()
, the item saves it to the layout .. and the item after it doesn't go back into place. (this works fine for Firefox)
If I change the layout value in my Dev tools, it restarts and everything looks fine.
I noticed that if I don't use fadeOut, but slideDown / slideUp, the problem is solved, but it's not the effect I want.
It seems that setting an element display: none
with fadeOut () behaves like visibility: hidden
.
source to share
I checked the issue on both on Firefox 33
and off Chrome 38
, and after I removed position: absolute
from JS (as you noted, you need the element to flow with everything) it just works well.
You said you were using an event mousehover
, but that doesn't exist, so you probably meant the mouseover
jquery event . You can check your code if there is no syntactic confusion around this point.
Here's a simplified javascript I used based on your code and explanations:
function hoverIn() {
$('.paddle-mega-dropdown').fadeIn("fast");
}
function hoverOut(e) {
$('.paddle-mega-dropdown').fadeOut("fast");
}
$('#hover-this').mouseover(hoverIn);
$('#hover-this').mouseleave(hoverOut);
I also created a jsfiddle demo so you can check that this works in both Firefox and Chrome.
source to share
I would try using fadeToggle instead of the fadein / fadeout paradigm you have installed. Thus, a DOM element can be easily created and destroyed with one call instead of two.
$( "megadropdown-expanded" ).hover(function() {
$('.paddle-mega-dropdown[data-mlid=' + activeitem + ']').fadeToggle("fast", "linear" );
});
But without an example here, I don't know if I can be of much greater help than this.
source to share