javascript - 使用 jQuery 的 DIV 动态位置

Question

我正在做一个项目来创建一个网站，在该网站上我需要 3 个 div 在勾选一些复选框（每个 div 一个）时出现/消失。我在这里做了一个例子：http: //jsbin.com/okevuy/1/edit 我的问题（解释起来很复杂）是我希望第一个勾选的 DIV 出现在顶部（无论哪个先触发）和接下来在第一个下方勾选 DIV。如果第一个通过取消选中复选框被隐藏，第二个移动到顶部，下一个勾选出现在下面，等等......有人可以帮助这样做并告诉我如何做吗？非常感谢 ！

Answer 1

这个http://jsbin.com/okevuy/5/

示例代码

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

Answer 2

我已经编辑了您的示例：http: //jsbin.com/okevuy/7/edit。核实。已更改的内容：如果 div 可见，则为“height: 50px”，否则为 height:0px。希望它能解决你的问题。

Answer 3

它仍然占用空间，因为您只是在移动它们而不是隐藏它们。动画完成后，您可以尝试隐藏/显示 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();});
});

http://jsfiddle.net/WqbH4/

Answer 4

试试这个

标记：在盒子周围添加一个包装器

<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>

脚本：

$(document).ready(function () {
$('#checkbox_red_div').click(function () {

    if ($(this).is(':checked')){ checkPosition("red_div"); $('#red_div').show(10); $('#red_div').animate({
        'opacity': '1',
            'margin-left': '0px'

    }, 300)}
    else $('#red_div').animate({
        'opacity': '0',
            'margin-left': '-80px',
            "display":"none"


    }, 300 , function(){$('#red_div').fadeOut(100)});
});
$('#checkbox_blue_div').click(function () {

    if ($(this).is(':checked')) { checkPosition("blue_div"); $('#blue_div').show(10); $('#blue_div').animate({
        'opacity': '1',
            'margin-left': '0px'
    }, 300 )}
    else $('#blue_div').animate({
        'opacity': '0',
            'margin-left': '-80px',

    }, 300 ,  function(){$('#blue_div').fadeOut(100)} );
});
$('#checkbox_green_div').click(function () {
    checkPosition("green_div");
    if ($(this).is(':checked')){ $('#green_div').show(10); $('#green_div').animate({
        'opacity': '1',
            'margin-left': '0px'
    }, 300)}
    else $('#green_div').animate({
        'opacity': '0',
            'margin-left': '-80px',

    }, 300 ,  function(){$('#green_div').fadeOut(100)});
});

function checkPosition(getBox)
{
  $("#"+getBox).appendTo("#mianwrapper");
}

});

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;

}