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; }
Comments
Post a Comment