Question

我正在开发一个项目来创建一个网站，当我勾选一些复选框（每个div一个）时，我需要3个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。核实。更改内容：“高度：50px”如果div可见，高度：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;

}

DIV使用jQuery动态定位

4 个答案: