确保jQuery fadeIn始终保持100％的可见性，定时器令人沮丧

我有一些用作工具提示的元素。当鼠标悬停/单击具有相应控件类的元素时，这些会被jQuery淡入。任何淡入的元素应在5秒后再次淡出。确保jQuery fadeIn始终保持100％的可见性，定时器令人沮丧

这对于jQuery非常简单，但是如果我在一个控制器中鼠标悬停，然后在5秒钟内再次重启，则定时器不会重置，所以假设显示一条提示和一条消息之间存在2秒的间隔， 3秒后淡出。

所以，谷歌搜索，并使用该网站，导致该

function showTips(triggerElement, tipText) { 
    $('#tipText').html(tipText);   
    clearTimeout($('#tipNote').stop().data('timer')); // clears timeOut to fade tooltip away 
    $('#tipNote').fadeIn(function() { // fadeIn tooltip and sets a timeout function to hide it again 
     $.data(this, 'timer', setTimeout(function() { $('#tipNote').fadeOut(); }, '5000')); 
    }); 
};

有两个问题在这里

1）如果你把鼠标移到而第一提示第二控制器元件没有完全褪去（例如在此时具有50％的不透明度），下一个工具提示似乎仅淡入到第一个达到的最终不透明度（即50％），但由于某种原因，它将该不透明度存储在内存中。

2）我不完全理解代码，因为它来自这里的一个例子，我不确定数据是什么，或者最后一行中的$ .data调用。由于我不完全理解它，我不知道如何纠正淡入淡出问题。

====编辑===

在我的HTML添加

工具提示容器是单个的div其内容由控制器元件填入，即：

控制器元件：

<span id='marginAlertTotal' class='hoverTip' title='this is the tooltip content'></span>

这有一类hoverTip如此工作在悬停

我的实际toolip是：

<div class='tooltipContent borderRad5 tooltip-right tooltip' id='tipNote'> 
     <span class="tiptext" id="tipText"></span> 
     <div class='tooltip-pointer-down ui-widget-content'> 
      <div class='tooltip-pointer-down-inner'></div> 
     </div> 
    </div>

从上面（通过点击或悬停调用）#tipText的内容是由控制器的title属性填充我的JavaScript功能

然后。

来源

2011-11-28 Jamie Hartnoll

它也可以这样做：使包含2个控件的div，用于悬停的1以及用于在悬停时显示的div的1。如果你做得正确，应该显示的div将是你悬停后的下一个div。给所有的工具提示同一类，但唯一的ID

$('.myControls').mouseenter(function(){ 
    $('.yourTooltipClass').each(function(){ 
     $(this).fadeout(200); //or just $(this).hide(); to hide it immediatly 
    }); 
$(this).next().fadein(time in ms).delay(5000).fadeout(time in ms); 
});

这将检查所有的工具提示，并将它们全部隐藏。然后它会显示正确的工具提示并在5秒后隐藏它。说实话，我的时间有点短，所以它不是最好的解决方案，因为如果您将鼠标放在控件上，它也会在5秒后隐藏工具提示。

但我认为这应该工作。

来源

2011-11-28 15:31:51

啊，我想我可能没有明确地发布我在用HTML做什么。包含实际工具提示内容的div是相同的div，而不管哪个工具提示控制器被点击/悬停，内容由控制元素的“title”属性填充。我试图通过使用相同的容器来保留我的HTML，但用不同的内容填充它并使用jquery.offset进行定位。所有的工作，但褪色到错误的不透明度是烦人的！ - 编辑原始帖子以显示HTML –

确保jQuery fadeIn始终保持100％的可见性，定时器令人沮丧

回答

相关问题