javascript - 将其他div推到右边

Question

我试图在一个 div 中滑动，然后移动其他 3 个 div。 我有 fiddle 展示我想怎么做。但它不是 100% 正确的。

如果您检查 fiddle ，您会看到它在您按下“按我”时滑入。但我不想越过 3 个红色 div，而是希望将它们推到一边。

Fiddle with code

HTML

<div class="wrapper wrapper-content">

<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div  id="red"><a href="#" id="toggle-menu">Press Me</a></div>
<div id="red"></div>
<div id="red"></div>

</div>
</div>

CSS

#red {
  background-color:red;
  height:50px;
  margin-top: 2px;
  width: 100px;
  position:relative;
}

#effectMenu
{
    display: none;
    background: grey;
    color: #FFF;
    width:30px;
    position:absolute;
    height:100%;
    z-index:1;
}

.container {
  border: 2px solid #73AD21;
  width:100px;
}

脚本

$(function()
  {
     $("a#toggle-menu").click(function()
                         {
                            $("#effectMenu").animate({width:'toggle'},350);
                            return false;
                         }); 
  });

Answer 1

将 id 更改为一个类，将一个类切换到名为 left 的元素，在 css 动画中使用 css transitions 添加类的过渡

  <div class="container" style="position:relative">
    <div id="effectMenu"></div>
    <div class="red"><a href="#" id="toggle-menu">Press Me</a></div>
    <div class="red"></div>
    <div class="red"></div>

  </div>
</div>
$(function() {
  $("a#toggle-menu").click(function() {
    $("#effectMenu").animate({
      width: 'toggle'
    }, 350);
    $(".red").toggleClass('left');
    return false;
  });
});
.red {
  background-color: red;
  height: 50px;
  margin-top: 2px;
  width: 100px;
  position: relative;
    transition: all 350ms ease-in-out;
}

#effectMenu {
  display: none;
  background: grey;
  color: #FFF;
  width: 30px;
  position: absolute;
  height: 100%;
  z-index: 1;
}

.container {
  border: 2px solid #73AD21;
  width: 100px;
}
.left {
  margin-left:30px;
  transition: all 350ms ease-in-out;
}

https://jsfiddle.net/ygmbnwgL/