Question

我正在学习使用jQuery中的.animate。我正在尝试弹出菜单。但是当我尝试使用两个动画元素时，它们就会蠕变。

全屏示例： http://jsfiddle.net/shapoval/cfr43/6/embedded/result/

代码示例： http://jsfiddle.net/shapoval/cfr43/6/

非常欢迎一点帮助。

HTML：

<div class="header">Header</div>
    <div class="container">
      <div class="column txt">
        <h3>Example sidebar column</h3>
      </div>
      <div class="mycontainer txt">
        <div id="main">
          Hello, world!
        </div>
        <div id="menu">
          <button id="button-OK">Click!</button></br>
        </div>
      </div>
    </div>
<div class="footer">Footer</div>

Coffescript：

$(document).ready ->
  animationTime = 1000
  $("#button-OK").click ->
    x = $(".column").width()
    $(".column").animate
      left: "-=#{x}px"
      , animationTime, "linear", ->
        $(".column").animate
          left: "+=#{x}px"
          , animationTime, "linear"
    $(".mycontainer").animate
      width: "+=#{x-1}px"
      , animationTime, "linear", ->
        $(".mycontainer").animate
          width: "-=#{x-1}px"
          , animationTime, "linear"

SCSS：

$grayMediumLight: #eaeaea;
$blue: #1166ff;
$red: #bd362f;
$grayDark: #999999;
$redDark: #992415;

.header {
  background: $grayDark;
  text-align: center;
}

.footer {
  background: $grayDark;
  text-align: center;
}

.txt {
  vertical-align: middle;
  text-align: center;
  color: #FFF;
  font-size: 24px;
}

.container {
  position: relative;
  overflow: hidden;
  width: 85%;
  margin: 0 auto;
  background: $grayMediumLight;
}

.mycontainer {
  width: 70%;
  background: $red;
  position: relative;
  height: 200px;
  float: right;
  display: block;
  border-style: none; 
}

.column {
  position: relative;
  width: 30%;
  float: left;
  background: $blue;
  display: block;
  height: 200px;
  border-style: none; 
}

#main{
}

#menu{
  float: left;
  width: 100px;
  background: $redDark;
}

P.S。对不起，我的英语不好。

Answer 1

当我改变了

时，问题就解决了

.column { position: relative; ...}

到

.column { position: absolute; ...}

如果我花了别人的时间，请原谅。

如何使用.animate以便不对元素进行爬网？

1 个答案: