Question

我试图在div中滑动然后移动3个其他div。我小提示我想怎么做。但它不是100％正确。

如果您检查小提琴，按下“按我”时会看到它滑入。但是，我没有超过3个红色div，而是希望它将它们推到一边。

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

使用float和relative位置代替absolute位置，您可以这样做：

CSS代码：

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

#effectMenu
{
    display: none;
    background: grey;
    color: #FFF;
    width:30px;
    position:relative;
    height:150px;
    z-index:1;
    float: left;
}

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

See this fiddle

Answer 2

将id更改为类，将类切换为名为left的项，在css中为使用css过渡添加类的过渡设置动画

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

将其他div推向右侧

2 个答案: