Question

如你所见：http://jsfiddle.net/agonl/4o79p3ww/，在开始时，开/关按钮高于其正常位置。我知道这是因为在加载文档时隐藏了其他div元素，但是如何解决这个移动问题呢？

感谢。

$(document).ready(function() {

$(".tog").css({"display":"none"});


$(".onoff").click(function(){
$(".button1").fadeToggle();
$(".button2").fadeToggle();
$(".button3").fadeToggle();
$(".button4").fadeToggle();


});

});

Answer 1

问题是，您在display: none和display: block之间切换。如果元素具有display: none元素所需的空间，则不将被分配。您可以使用opacity:0使元素不可见，但仍然需要它的空间，然后切换它的可见性如下：

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

如果你想让类.tog的对象从头开始不可见，请在css中设置：

.tog{
    opacity: 0;
}

fiddle

Answer 2

你可以加上这个：

.row {
    min-height:170px;
}

Answer 3

您可以使用不透明度进行切换：

我还简化了你的代码。

$(".tog").animate({ 'opacity': 0});

http://jsfiddle.net/agonl/4o79p3ww/

在切换其他元素时阻止div元素移动？

3 个答案: