Javascript 避免鼠标悬停鼠标悬停冲突

我在这里使用js小提琴： 动画就是这样工作的

您将鼠标悬停在文本上，一个圆圈将淡入并在1秒后开始脉冲，只要您的鼠标停留在文本上

当鼠标指针离开文本时，脉冲在一秒钟后停止，圆圈消失

当您执行此操作时，会出现问题：

将鼠标放在文本上，从文本中删除指针，然后在脚本有机会完成之前将指针放回文本上（1-1.4s）

您将无法使圆圈再次正确显示…您必须允许脚本重置。这就是问题所在

解决这个问题的最佳方法是什么

示例代码：

 <div class='circle__title_project-management'>
 <h1>project management</h1>
 </div>
 <div class='circle__project-management hidden'></div>



.circle__project-management, .circle__title_project-management
{
    display: inline-block;
    cursor: pointer;
}

.circle__project-management
{   
    margin-left: 8px;
    vertical-align: -4.07px;
    background-color: transparent;
    border: 2px solid #00DBFF;
    width: 30px;
    height: 30px;
    border-radius: 90px;
    top: 280px;
    left: 40px;
}

.hidden
{
    visibility: hidden;
}

.visible
{
    visibility: visible;
}

.animate-infinite 
{
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}



    var circleTitle =  $('.circle__title_project-management h1');
var circle = $('.circle__project-management');
var initTimeout = 1000;
var initTimeoutPlus = 1400;
circleTitle.mouseover( function() {
    circle.removeClass('hidden');
    circle.addClass('animated fadeIn');   
    setTimeout( function() {
        circle.addClass('pulse animate-infinite');
        circle.removeClass('fadeIn');
    }, initTimeout);
});
circleTitle.mouseleave( function() {
    setTimeout( function() {
        circle.stop().removeClass('pulse animate-infinite visibility');
        circle.addClass('fadeOut');
    }, initTimeout);
    setTimeout( function() {
        circle.removeClass('fadeOut');
        circle.addClass('hidden');
    }, 1400);
});

项目管理
.circle\u项目管理，.circle\u title\u项目管理
{
显示：内联块；
光标：指针；
}
.circle___项目管理
{   
左边距：8px；
垂直对齐：-4.07px；
背景色：透明；
边框：2px实心#00DBFF；
宽度：30px；
高度：30px；
边界半径：90px；
顶部：280px；
左：40px；
}
.隐藏
{
可见性：隐藏；
}
看得见的
{
能见度：可见；
}
.使无限有生气
{
动画迭代次数：无限；
-moz动画迭代次数：无限；
-webkit动画迭代计数：无限；
}
var circleTitle=$（'.circle\u title\u project-management h1'）；
var circle=$（'circle_u_项目管理'）；
var initTimeout=1000；
var initTimeoutPlus=1400；
circleTitle.mouseover（函数（）{
circle.removeClass（'hidden'）；
circle.addClass（'animated fadeIn'）；
setTimeout（函数（）{
circle.addClass（'pulse animate infinite'）；
circle.removeClass（'fadeIn'）；
}，初始化超时）；
});
circleTitle.mouseleave（函数（）{
setTimeout（函数（）{
circle.stop（）.removeClass（'pulse animate infinite visibility'）；
circle.addClass（'fadeOut'）；
}，初始化超时）；
setTimeout（函数（）{
圆圈。删除类（“淡出”）；
circle.addClass（'hidden'）；
}, 1400);
});

为了避免敌对行为，可以在触发事件时向元素添加一个类来标记它，并在触发另一个事件时将其删除。

---

这样，您就可以控制正在发生的事情。

您可以设置“鼠标悬停时间”功能，以覆盖鼠标悬停的时间延迟

请注意，第一次运行必须毫不延迟

var initTimeout = 1000;
var initTimeoutPlus = 1400;
var firstrun = true;
circleTitle.mouseover( function() {

    if (firstrun) {
        initTimeoutPlus = 0;
        firstrun = false;
    } else initTimeoutPlus = 1400; 

     setTimeout(function() {
         circle.removeClass('hidden');
        circle.addClass('animated fadeIn');   
        setTimeout( function() {
            circle.addClass('pulse animate-infinite');
            circle.removeClass('fadeIn');
        }, initTimeout);
     }, initTimeoutPlus);
});

---

如果您只是在mouseover上添加一个键，并在mouseleave之后切换它，并且在触发任何mouseleave超时事件之前，检查该键，如果已设置，则忽略，否则继续执行mouseleave

这样，如果按键为“开”，则表示鼠标在上方移动；如果按键为“关”，则表示鼠标已移动且仍在移动

    var key = false;
circleTitle.mouseover( function() {
    key = true;
    circle.removeClass('hidden');
    circle.addClass('animated fadeIn');   
    setTimeout( function() {
        circle.addClass('pulse animate-infinite');
        circle.removeClass('fadeIn');
    }, initTimeout);
});
circleTitle.mouseleave( function() {
    key = false;
    setTimeout( function() {
        if (!key){
            circle.stop().removeClass('pulse animate-infinite visibility');
            circle.addClass('fadeOut');
        }
    }, initTimeout);
    setTimeout( function() {
        if (!key){
            circle.removeClass('fadeOut');
            circle.addClass('hidden');
        }
    }, 1400);
});

---

您应该注意，

setTimeout

有一个返回值。您希望在开始新的超时之前清除以前的超时；否则，您可能会得到一个超时队列，它会完全扭曲您的动画。大概是这样的：

var myTimeout;
...
clearTimeout(myTimeout);    
myTimeout = setTimeout(...);

不确定这是否正是你想要的，但大致如下：

更多信息请点击此处：

---

---

另外，它看起来像是

circle.stop（）

调用什么也没做（因为它是css动画）

这里有一个类似的效果，使用css3@NicoO小提琴是一个很棒的学习工具。非常感谢。是的，我已经将动画缩减为“$”（“.pulseTrigger”）。hoverIntent（fadeinPulse，fadeoutPulse，'h1'）；'