предотвратить «MouseEnter» функция обратного вызова до тех пор пока эффект «изюминкой» является полным

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 разрешено на долю секунды. В результате вы видите синий фон.

Это негативно влияет на UX.

Как предотвратить это?

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>