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>&nbsp;</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. enter image description here enter image description here

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

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -