Javascript Fadein和Fadeout停止jquery函数正常工作

我已经整理了一个例子来帮助解释这个问题：

在本例中，我有一张地图和地图上的各种标记（蓝色方块）。将鼠标悬停在标记上时，将显示一个工具提示，其中包含图像（左）和一些文本（右）。图像和文本div应该始终保持相同的高度，因此我使用javascript确定最高的div，并将该高度值指定给较短的div

最初，工具提示div标记为“display:none；”，然后当您将鼠标悬停在标记上时，将其标记为“fadesin”，当您将鼠标悬停在标记外时，将其标记为“fadesout”

我已经一步一步地测试了这段代码，在添加fadein/fadeout操作之前，所有代码都正常工作。在添加这两个动作之前，javascript重新调整大小的效果很好（您可以尝试删除这两行来查看），但是当我添加这些淡入淡出动作时，高度停止正常工作

我注意到，如果您快速将鼠标悬停在同一标记上，然后再将鼠标悬停在同一标记上，则高度调整确实会生效

有什么想法吗？我在重新调整大小后添加了fadein，假设所有的重新调整大小都会在工具提示暴露之前完成，但是肯定有一些东西不能正常工作

我将感谢任何帮助。谢谢

$('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');
});

$（'a.map\u marker'）。悬停（函数（e）{
//根据单击的标记的位置更改工具提示内容
var elementToGet='.tooltip_html_source.'+$（this.attr（'location'）；
var newHTML=$（elementToGet.html（）；
$（'#tooltip_container.tooltip_content'）.html（newHTML）；
//获取文本div的高度
var textHeight=$（'#tooltip_container.tooltip_content.text'）.height（）；
//如果文本div小于70px（图像div的最小高度）
如果（文本高度<70）{
//然后将文本div的高度设为70px
$（'#tooltip_container.tooltip_content.text'）。高度（70）；
}
//否则，如果文本div大于70px
否则如果（文本高度>70）{
//使图像div的高度=文本div的高度
$（'#tooltip_container.tooltip_content.image'）。高度（textHeight）；
}
//调整大小后，淡入工具提示div
$（'tooltip_container'）.fadeIn（'slow'）；
}，函数（）{
//悬停关闭时，淡出工具提示div
$（'tooltip_container'）。淡出（'slow'）；
});

这里的问题是（即

display

CSS属性设置为

none

的元素）未定义

因为你的

#工具提示(tooltip)容器

确实有

显示：无样式，在以某种方式显示在页面上之前，无法获取其实际高度，例如，通过将
显示设置为
块
。但有一个技巧：在开始淡入淡出序列之前，可以将其有效地设置为不可见-要么将
不透明度设置为
0
，要么添加
可见性：隐藏样式

问题的直接解决方案是将
fadeIn
动画向上移动-在开始测量正在褪色的元素之前：

// 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

//开始淡入元素
$（'tooltip_container'）.fadeIn（'slow'）；
//获取文本div的高度
var textHeight=$（'#tooltip_container.tooltip_content.text'）.height（）；
//如果文本div小于70px（图像div的最小高度）
如果（文本高度<70）。。。
//代码的其余部分如下

（完整代码：）

它之所以能工作，是因为
fadeIn
会立即将
显示设置为
块
/
内联块
/
内联块
，同时将不透明度设置为
0.0
（并逐渐增加）-因此您的
工具提示容器
元素会呈现在页面上，你可以看到它的高度。
太棒了@NikitaBaksalyar！这与我编写的示例代码以及我正在进行的实际项目完美配合。感谢您提供解决方案，特别是感谢您花时间解释“为什么”。非常感谢！