javascript - 如何使用 .animate() 从特定一侧扩展宽度

Question

我正在尝试为一个元素制作开场序列动画，我想知道如何使用 .animate() 使我的 div 从右侧而不是左侧“进入”，这似乎成为默认值。

我确信这是一个简单的解决方案，这是我的代码和 fiddle :

JSFiddle

$("#clickMe").click(function() {
    $(".login").animate({width: '0'});
}, function() {
    $(".login").animate({width: '100'});
});

谢谢!

Answer 1

您可以设置一个 margin-left ，其值等于元素的宽度并同时对其进行动画处理。这样做时，宽度动画基本上被边距取代。

$("#clickMe").click(function() {
  $(".login").animate({
    'width': '100',
    'margin-left': '0'
  });
});

.login {
  height: 100px;
  width: 0px;
  background-color: #f00;
  margin-left: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
  Click To Change Size
</button>
<div class="login"></div>

---

或者，另一种方法是将元素 float 到具有相同尺寸的父元素的右侧:

$("#clickMe").click(function() {
  $(".login").animate({width: '100%'});
});

.animation-wrapper {
  width: 100px;
  height: 100px;
}
.login {
  height: 100%;
  width: 0;
  background-color: #f00;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
  Click To Change Size
</button>
<div class="animation-wrapper">
  <div class="login"></div>
</div>

同样，您也可以只为 left 属性设置动画并 overflow hidden :

$("#clickMe").click(function() {
  $(".login").animate({'left': '0'});
});

.animation-wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  overflow: hidden;
}
.login {
  height: 100%;
  width: 100%;
  background-color: #f00;
  position: absolute;
  left: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
  Click To Change Size
</button>
<div class="animation-wrapper">
  <div class="login"></div>
</div>