Javascript 使用jQuery的DIVs动态位置

我正在做一个项目，创建一个网站，当勾选一些复选框时，我需要显示/取消显示3个分区。我在这里举了一个例子： 我的问题很复杂，我想解释的是，我希望第一个勾选的DIV出现在顶部，无论哪一个被首先触发，下一个勾选的DIV在第一个下方。如果通过取消勾选复选框隐藏了第一个复选框，则第二个复选框将移至顶部，下一个勾选的复选框将显示在下方，以此类推。。。 有人能帮我吗？告诉我怎么做？ 非常感谢

这是怎么回事

示例代码

$('#red_div').animate({
                'height': '50',
                 'opacity': '1',
                'margin-left': '0px'
        }, 300);
        else $('#red_div').animate({
              'height': '0',
                'opacity': '0',
                'margin-left': '-80px'
        }, 300);
    });

我已经编辑了您的示例：。检查一下。更改内容：如果div可见，则高度为50px，否则高度为0px。

---

希望它能解决您的问题。

它仍然占用空间，因为您只是移动它们，而不是隐藏它们。动画制作完成后，可以尝试隐藏/显示div：

    if ($(this).is(':checked')) $('#red_div').show().animate({
        'opacity': '1',
            'margin-left': '0px'
    }, 300);
    else $('#red_div').animate({
        'opacity': '0',
            'margin-left': '-80px'
    }, 300, function(){ $(this).hide();});
});

试试这个

标记：在框周围添加包装

<div id="mianwrapper" >
   <div id='red_div' class='divs'></div>
   <div id='blue_div' class='divs'></div>
   <div id='green_div' class='divs'></div>
</div>

Css: css中的小变化

#red_div{
   border:solid 1px red;
   width:100px;
   height:50px;
   opacity:1;
   float:left;
   clear:left;
}

#blue_div{
   border:solid 1px blue;
   width:100px;
   height:50px;
   opacity:1;
   float:left;
   clear:left;
}

#green_div{
   border:solid 1px green;
   width:100px;
   height:50px;
   opacity:1;
   float:left;
   clear:left;

---

}

如果在第一个复选框之前选中了第二个复选框，您希望第二个复选框保持在顶部，还是第一个复选框占据第一个位置，第二个复选框向下移动？如果可能，我希望它位于另一个复选框的下方这对我有帮助是的，谢谢，但是否可以将最后选中的复选框置于已显示的其他复选框的下方？不要紧，谢天谢地，谢天谢地，老兄！谢谢，它很有魅力！谢谢大家的回答！

#red_div{
   border:solid 1px red;
   width:100px;
   height:50px;
   opacity:1;
   float:left;
   clear:left;
}

#blue_div{
   border:solid 1px blue;
   width:100px;
   height:50px;
   opacity:1;
   float:left;
   clear:left;
}

#green_div{
   border:solid 1px green;
   width:100px;
   height:50px;
   opacity:1;
   float:left;
   clear:left;