如何避免 jquery 中的 mouseenter 事件闪烁?
how to avoid flickering on mouseenter event in jquery?
我不知道这方面的确切技术术语,但在遵循 'mouseenter' 和 'mouseleave' 事件上的 jquery 代码后,整个 div 会像单击按钮一样移动(闪烁?)我也使用了 'mouseover' 和 'mouseout' 但同样的问题发生了。
$total_doctors=mysql_fetch_array(mysql_query("select count(*) from doctor"));
主要div:
<div class='mainspan action-nav-button'>
<a href='doctor.php'>
<span> </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 的大小。
如您所见,这是因为字体大小和文本发生了变化。
不一定只是使字体大小相同。
我认为当 countdoctor
具有静态高度和宽度时,您的问题就会得到解决。例如:
#countdoctor
{
display:block;
height:50px; /*Toggle just how you like it*/
width:100%; /*Depends on the parent, so just always take full width*/
}
我不知道这方面的确切技术术语,但在遵循 'mouseenter' 和 'mouseleave' 事件上的 jquery 代码后,整个 div 会像单击按钮一样移动(闪烁?)我也使用了 'mouseover' 和 'mouseout' 但同样的问题发生了。
$total_doctors=mysql_fetch_array(mysql_query("select count(*) from doctor"));
主要div:
<div class='mainspan action-nav-button'>
<a href='doctor.php'>
<span> </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 的大小。
如您所见,这是因为字体大小和文本发生了变化。
不一定只是使字体大小相同。
我认为当 countdoctor
具有静态高度和宽度时,您的问题就会得到解决。例如:
#countdoctor
{
display:block;
height:50px; /*Toggle just how you like it*/
width:100%; /*Depends on the parent, so just always take full width*/
}