Question

我在这里使用这个js小提琴：http://jsfiddle.net/tPx6x/ 动画就像这样

将鼠标悬停在文字上方，一个圆圈淡入＆amp;只要鼠标悬停在文本上，就会在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);
});

Answer 1

您应该注意setTimeout有一个返回值。你想在开始新的超时之前清除以前的超时;否则你可以获得一个完全扭曲你的动画的超时队列。像这样：

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

不确定这是否与您的目标完全相同，但请遵循以下几点：http://jsfiddle.net/FYY38/

此处有更多信息：http://www.w3schools.com/js/js_timing.asp

此外，看起来circle.stop()调用无效（因为它是css动画的）

Answer 2

为了避免敌对行为，可以在元素中添加一个类，以便在触发事件时对其进行标记，并在触发另一个事件时将其删除。这样你就可以控制正在发生的事情。

Answer 3

您可以设置鼠标悬停功能的时间以覆盖鼠标离开的时间延迟。

请注意，第一次运行必须没有延迟

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

Answer 4

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

这种方式，如果键是＆＃34; on＆＃34;它意味着鼠标已经结束，如果它已经关闭，则表示发生了鼠标并且仍在发生

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

避免鼠标悬停mouseleave冲突

4 个答案: