如何避免在jquery中的mouseenter事件上闪烁? [英] how to avoid flickering on mouseenter event in jquery?

问题描述

我不知道确切的技术术语，但是在"mouseenter"和"mouseleave"事件的后续jQuery代码中，整个div都像按钮单击一样移动(闪烁?)，我还使用了"mouseover"和"mouseout"但是会出现同样的问题.

I don't know exact technical word for this but in following jquery code on 'mouseenter' and 'mouseleave' event the whole div get movement like button clicked (flickers?) and I also used 'mouseover' and 'mouseout' but same problem occurs.

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

主要div:

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

我想避免在mouseenter和mouseleave上调整div的大小.

I want to avoid resizing of div on mouseenter and on mouseleave.

推荐答案

您注意到这是因为字体大小和文本发生了变化. 不必只是使字体大小相同. 我认为当countdoctor具有固定的高度和宽度时，您的问题将得到解决.例如:

As you noticed it's because the font-size and the text change. It is not necessarily to just make the font sizes the same. I think your problem will be solved when countdoctor have a static height and width. e.g. :

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

这篇关于如何避免在jquery中的mouseenter事件上闪烁?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！