Question

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

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

最初工具提示div被标记为“display：none;”，然后当您将鼠标悬停在标记上时，它会“淡化”，当您将鼠标悬停在标记上时，它会“淡出”。

我已逐步测试了此代码，并且所有操作都正常，直到我添加了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');
});

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元素会在页面上呈现，你可以得到它的高度。

Fadein和Fadeout阻止jquery功能正常工作

1 个答案: