Question

我遇到的问题与下面的代码段类似：

$('button').click(function(){
    var p = $('<p>Lorem</p>');
    $('body').prepend(p);
    p.effect("highlight", {}, 3000);
});

$(document).on('mouseenter', 'p', function(){
    $(this).css('background', 'blue');
});

$(document).on('mouseleave', 'p', function(){
    $(this).css('background', 'white');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<button>Add</button>

正如您所注意到的，只要第一个Lorem被添加到身体之前，mouseenter就会被允许一小段时间。因此，您会看到蓝色背景。

这对用户体验产生了负面影响。

如何防止这种情况发生？

Answer 1

这应该适合你：

$('button').click(function(){
    var p = $('<p>Lorem</p>');
    $('body').prepend(p);
  
    p.effect("highlight", {}, 3000);
  
    // give your new element a class
    p.addClass('noHover');
  
    // remove that class after the animation
    setTimeout(function() { p.removeClass('noHover'); }, 3000);
    // from my testing, you could probably stand to take the `3000` down to `2500` 
    // but I leave that to you
});

$(document).on('mouseenter', 'p', function(){
  
    // check for the added class
    if(!$(this).hasClass('noHover')){
      
        //only allow the blue hover effect if the 'noHover' class has been removed
        $(this).css('background', 'blue');
    }
  
});

$(document).on('mouseleave', 'p', function(){
    $(this).css('background', 'white');
});

#myBtn{ margin-top:22px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<button id="myBtn">Add</button>

防止'鼠标悬停'回调功能，直到'高亮'效果完成

1 个答案: