淡入淡出停止 jquery 功能正常工作

Question

我举了一个例子来帮助解释这个问题：http://codepen.io/tathianactn/pen/EaEzRB。

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

最初，工具提示 div 被标记为 "display: none;"，然后当您将鼠标悬停在标记上时它 "fadesin" 并且当您将鼠标悬停在标记上时它 "fadesout"。

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

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

有什么想法吗？我在调整大小后添加了淡入淡出，假设所有调整大小都会在工具提示显示之前完成，但肯定有些地方无法正常工作。

如有任何帮助，我将不胜感激。谢谢！

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

Answer 1

这里的问题是 width & height of invisible elements（即 display CSS 属性设置为 none 的元素）未定义。

并且由于您的 #tooltip_container 确实具有 display: none; 样式，因此在以某种方式在页面上显示之前您无法获得其实际高度，例如通过将 display 设置为 block。但有一个技巧：在开始淡入淡出序列之前，您可以有效地使其不可见 - 将 opacity 设置为 0，或者添加 visibility: hidden; 样式。

您的问题的直接解决方案是向上移动 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

（完整代码：http://codepen.io/anon/pen/ogqrQo）

它起作用的原因是因为 fadeIn 立即将 display 设置为 block/inline/inline-block，同时将不透明度设置为 0.0（并逐渐增加它）- 因此您的 #tooltip_container 元素会呈现在页面上，您可以获得它的高度。

淡入淡出停止 jquery 功能正常工作

Fadein and Fadeout stopping jquery function from working correctly

javascript

css

jquery

fadeout

fadein