Question

我正在尝试动画一个项目的开场序列，我想知道如何使用.animate()让我的div“从右边进入”而不是左边，这似乎是默认的。

我确信这是一个简单的解决方案，这是我的代码和小提琴：

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

谢谢！

Answer 1

您可以设置margin-left，其值等于元素的宽度，并同时为其设置动画。在这样做时，宽度动画基本上被边距取代。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

同样，您也可以只为left属性设置动画并隐藏溢出：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

它是一个简单的解决方案，但对于简单的情况应该足够了：

使用精确宽度和高度的容器包装您的登录信息：

<div class="wrap">
  <div class="login"></div>
</div>

比应用样式：

.login {margin-left: 100px; height: 100px; width: 100px; background-color: red;}
.wrap{
  width: 100px;
  height: 100px;
  overflow: hidden;
}

将.login移动到.wrap的右侧（使用margin-left：100px;）并添加overflow：hidden到.wrap（.login将不可见）而不是简单地将margin-left重置为0：

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

如何使用.animate（）扩展特定边的宽度

2 个答案: