mouseevent - how to avoid flickering on mouseenter event in jquery? -
i don't know exact technical word in following jquery code on 'mouseenter' , 'mouseleave' event whole div movement button clicked (flickers?) , used 'mouseover' , 'mouseout' same problem occurs.
$total_doctors=mysql_fetch_array(mysql_query("select count(*) doctor"));
main 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>
script code:
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" }); }); });
i want avoid resizing of div on mouseenter , on mouseleave.
as noticed it's because font-size , text change. not make font sizes same. think problem solved when countdoctor
have static height , width. e.g. :
#countdoctor { display:block; height:50px; /*toggle how it*/ width:100%; /*depends on parent, take full width*/ }
Comments
Post a Comment