Как избежать мерцания события mouseenter в jquery?

Question

Я не знаю точное техническое слово для этого, но в следующем коде jquery на событии «mouseenter» и «mouseleave» весь div получает движение, как нажатие кнопки (мерцает?), И я также использовал «mouseover» и «mouseout», но такая же проблема возникает.

$total_doctors=mysql_fetch_array(mysql_query("select count(*) from doctor")); 

Главная ДИВ:

<div class='mainspan action-nav-button'> 
    <a href='doctor.php'> 
    <span>&nbsp;</span> 
    <i class='fa fa-user-md'></i> 
    <span>Doctor</span> 
    <span id='countdoctor'>0</span> 
    </a> 
</div> 

код сценария:

var docNumbr = <?php echo $total_doctors['0']; ?>; 

$(document).ready(function(){ 
$({countNum: $('#countdoctor').text()}).animate({countNum: docNumbr}, { 
duration: 2000, 
easing:'linear', 
step: function() { 
$('#countdoctor').text(Math.floor(this.countNum)+1); 
} 
}); 
    $('#countdoctor').mouseenter(function(){ 
    $(this).text("Total Records: "+docNumbr).css({"opacity" : "0.5", "font-size" : "14px" }); 
    }).mouseleave(function(){ 
    $('#countdoctor').text(docNumbr).css({"opacity" : "1.0", "font-size" : "25px" }); 
}); 
}); 

Я хочу, чтобы избежать изменения размера DIV на MouseEnter и MouseLeave.

Answer 1

Как вы заметили, это связано с изменением размера шрифта и текста. Не обязательно просто делать размеры шрифта одинаковыми. Я думаю, что ваша проблема будет решена, если countdoctor имеют статическую высоту и ширину. например :

#countdoctor 
{ 
    display:block; 
    height:50px; /*Toggle just how you like it*/ 
    width:100%; /*Depends on the parent, so just always take full width*/ 
}