确保 jQuery fadeIn 始终保持 100% 可见性,计时器正在扰乱它

发布于 2024-12-18 07:28:39 字数 1556 浏览 2 评论 0原文

我有一些用作工具提示的元素。当鼠标悬停/单击具有适当控制类的元素时,这些会通过 jQuery 淡入淡出。任何已淡入的元素应在 5 秒后再次淡出。

这对于 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 的作用,或者确实是最后一行中的 $.data 调用。由于我不完全理解它,我不确定如何纠正淡入问题。

====编辑===

在我的HTML中添加

工具提示容器是一个单独的div,其内容由控制器元素填充,即:

控制器元素:

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

它有一个hoverTip类,因此可以在悬停时工作

我的实际工具提示是:

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

然后从我上面的 Javascript 函数(通过单击或悬停调用)#tipText 的内容由控制器的 title 属性填充。

I have some elements which are used as tool tips. These are faded in with jQuery on mouseover/click of elements with the appropriate controlling class. Any element which has been faded in should fade out again after 5 seconds.

This is pretty simple with jQuery, but if I mouseover one controller, and then another within 5 seconds, the timer is not reset, so say there's been a 2 second break between displaying one tip and the secopnd, the second will fadeOut after 3 seconds.

So, Googling, and using this site, resulted in this

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

There are two problems here

1) if you mouse over a second controller element whilst the first tooltip is not fully faded in, (ie has an opacity of 50% for example at that moment), the next tooltip seems to only fade in to the final opacity that the first one reached (ie 50%), it stores that opacity in memory for some reason.

2) I don't completely understand the code as it came from an example on here, I'm not sure what .data does, or indeed the $.data call in the final line. Since I don't completely understand it I am not sure how to correct the fadeIn issue.

==== edit ===

adding in my HTML

The tooltip container is a single div whose content is populated by the controller element, ie:

Controller element:

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

This has a class of hoverTip so works on hover

My actual toolip is:

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

Then from my Javascript function above (called by click or hover) the content of #tipText is populated by the title attribute of the controller.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

成熟的代价 2024-12-25 07:28:39

也可以这样做:
制作一个包含 2 个控件的 div,其中 1 个用于悬停,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 秒后隐藏工具提示。

但我认为这应该有效。

It can also be done like this:
make a div containing 2 controls, 1 for the hover, and 1 with the div that should show on hover. if you do it correctly the div that should show will be the next one after the control you hover. give all tooltips the same class but unique id's

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

This will check all your tooltips and hide them all.
Then it will show the correct tooltip and hide it after 5 seconds.
To be honest im a bit short on time so its not the best solution because it will also hide the tooltip after 5 seconds if you keep your mouse on the control.

But I think that should work.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文