jQuery 淡入淡出切换

Posted 2023-05-08

【中文标题】jQuery 淡入淡出切换

【英文标题】：Jquery fadetoggle

【发布时间】：2013-02-24 04:23:57

【问题描述】：

我正在尝试使用 jquery fadetoggle 来平滑淡入和淡出。除了一件事，一切都很好。当你悬停段落时，工具提示会淡入，当你离开段落时，工具提示会淡出，但是当你悬停段落时，然后你悬停工具提示，它会很快淡出并淡入。我怎样才能摆脱这个动画？我的意思是当我悬停它时工具提示不应该淡入。只有当我将段落悬停时它才会淡入

css

pposition: relative; cursor: default;
#tooltipdisplay: none; position: absolute; top: -28px; left: 0px; padding: 1px 10px; border-radius: 13px; background: #3DD13D; color: #fff;

html

<p>Text which has meta info when hovered<span id="tooltip">Hi im meta info</span></p>

js

$(document).ready(function()   
    $('p').hover(function()
        $('#tooltip').fadeToggle("500", "linear", "true")
    )
);

【参考方案1】：

添加stop 以在切换之前停止动画：

$('#tooltip').stop().fadeToggle("500", "linear", "true")

见小提琴here。

【讨论】：

不客气，接受答案，这样它就可以显示为已回答。