我正在尝试为一个元素制作开场序列动画,我想知道如何使用 .animate()
使我的 div 从右侧而不是左侧“进入”,这似乎成为默认值。
我确信这是一个简单的解决方案,这是我的代码和 fiddle :
$("#clickMe").click(function() {
$(".login").animate({width: '0'});
}, function() {
$(".login").animate({width: '100'});
});
谢谢!
最佳答案
您可以设置一个 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>
关于javascript - 如何使用 .animate() 从特定一侧扩展宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34475444/