javascript - Preventing the div element from moving when it toggles some other elements? -


as see in here: http://jsfiddle.net/agonl/4o79p3ww/ , in beginning, on/off button above normal position. know it's because of hiding other div elements when document loaded, how can fix moving problem?

thanks.

$(document).ready(function() {  $(".tog").css({"display":"none"});   $(".onoff").click(function(){ $(".button1").fadetoggle(); $(".button2").fadetoggle(); $(".button3").fadetoggle(); $(".button4").fadetoggle();   });  }); 

the problem is, toggle between display: none , display: block. if element has display: none required space element not allocated. use opacity:0 make element invisible still requiring it's space , toggle it's visibility this:

$(".tog").animate({"opacity": !($(".tog").css("opacity") > 0)}, 500); 

and if want objects class .tog invisible beginning set in css:

.tog{     opacity: 0; } 

fiddle


Comments

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -