并行移动两个div元素

Question

1. 点击div1后，div2应该会打开。
2. div1和div2都应该同时移动。
3. 点击div1后，div1应该转到原来的位置。

如何实现这一目标？



当我点击上面的div时，两个div应该像这样打开。



这是我在div1 onclick上的代码

$("#div2").toggle(function(){
        if($("#div2").is(":visible")){ frmWidth = "240"; }
        if($("#div2").is(":hidden")){ frmWidth = "-60"; }

        $("#div1").css("right",frmWidth+"px");
    });

Answer 1

• 将您的元素包裹在父DIV
中
• 为父级设置动画

Answer 2

html：

<div class="div2"></div>
<div class="div1"></div>

css：

body {overflow:hidden;}
.div2 {
    background: #ccc;
    width:100px;
    height: 500px;
    float: right;
    margin-right:-100px;


}
.div1 {
    background: #eee;
    width:100px;
    height: 500px;
    float: right;

}

js：

$true = 1;
$('.div1').click(
    function() {
        if ($true == 0) {
            $('.div2').animate({'margin-right':-100 });
            $true = 1;
        } else {
        $('.div2').animate({'margin-right':0 });
         $true = 0;
        }


});

请参阅：https://jsfiddle.net/LL9gy2dc/