Fadein and Fadeout stopping jquery function from working correctly

Question

I've put together an example to help explain the issue: http://codepen.io/tathianactn/pen/EaEzRB.

In this example I have a Map and various markers on the map (the blue squares). When you hover over the markers, a tooltip should appear with an image (left) and some text (right). The image & text div should always be the same height, therefore I am using javascript to determine the tallest div, and assigning that height value to the shorter div.

Initially the tooltip div is marked as "display: none;", then as you hover over a marker it "fadesin" and when you hover off the marker it "fadesout".

I have tested this code step by step, and all was working correctly until I added the fadein / fadeout actions. Before adding those two actions, the javascript re-sizing worked just fine (you can try removing those two lines to see), however when I added in those fade actions the heights stopped working correctly.

I noticed that if you quickly hover off and then hover back on the same marker, the height re-sizing does take effect.

Any ideas? I added the fadein after the re-sizing, supposing that all of the re-sizing would get done before the tooltip was exposed, but something is certainly not working correctly.

I would appreciate any help. Thanks!

$('a.map_marker').hover(function(e) {

   //Change tooltip content based on location of marker clicked
   var elementToGet = '.tooltip_html_source.'+$(this).attr('location');
   var newHTML = $(elementToGet).html();
   $('#tooltip_container .tooltip_content').html(newHTML);

   //Get height of text div
   var textHeight = $('#tooltip_container .tooltip_content .text').height();

   //If text div is less than 70px (min height of image div)
   if(textHeight < 70) {

      //Then make the height of the text div = 70px
      $('#tooltip_container .tooltip_content .text').height(70);
   }

   // else if the text div is greater than 70px
   else if(textHeight > 70) {

      //Make the height of the image div = the height of the text div
      $('#tooltip_container .tooltip_content .image').height(textHeight);
   }

   //Once the resizing has been done, fade in the tooltip div
   $('#tooltip_container').fadeIn('slow');

}, function() {

   //On hover off, fade out the tooltip div
   $('#tooltip_container').fadeOut('slow');
});

NikitaBaksalyar NikitaBaksalyar · Accepted Answer · 2015-02-20T23:40:41

The problem here is that width & height of invisible elements (i.e. elements with display CSS property set to none) are undefined.

And because your #tooltip_container is indeed has display: none; style, you can't get its actual height before you show it in some way on the page e.g. by setting display to block. But there's a trick: before you start your fading sequence, you can make it effectively invisible - either with opacity set to 0, or by adding visibility: hidden; style.

The immediate solution to your problem would be to move fadeIn animation up - before you start measuring the element you're fading:

// Start fading the element
$('#tooltip_container').fadeIn('slow');

//Get height of text div
var textHeight = $('#tooltip_container .tooltip_content .text').height();

//If text div is less than 70px (min height of image div)
if(textHeight < 70) ...

// Rest of the code follows

(Full code: http://codepen.io/anon/pen/ogqrQo)

The reason it works is because fadeIn immediately sets display to block/inline/inline-block, while setting opacity to 0.0 (and gradually increasing it) - therefore your #tooltip_container element gets rendered on the page, and you can get its height.

Fadein and Fadeout stopping jquery function from working correctly

1 Answers