jQuery的动画()函数不动画
问题描述:
我想编写JavaScript中的动画,我有问题jQuery的动画()函数不动画
在我的节目我试图动画<label>
的margin-top
,但它不“以我想要的方式发生。
例如
$('label').animate({marginTop: '0%'},500);
的margin-top
CSS属性的变化,但它在眨眼发生的而不是平稳移动。
这里是我的代码:
HTML
<label id="menu-button-label"><input type="checkbox" id="menu-button"></label>
JS:
$($('#menu-button-label').click(function() {
if($('#menu-button').is(':checked')) {
$('#menu-button-label').animate({marginTop: '0%'},500);
}
});
答
我做了一些改变你的代码,但基本上现在我在一个潜水应用marginTop,和在这次潜水中有你的标签。
去看一下波纹管代码,我认为这将有助于你
$(function(){
//alert(3);
$('#menu-button-label').animate({marginTop: '20%'},1500);
});
$('#menu-button-label').click(function() {
if($('#menu-button').is(':checked')) {
}
$('.info').animate({ marginTop: '0px'}, 1000);
});
.item {
background: #ccc;
width: 200px;
height: 300px;
}
.info{
margin-top: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<div class="info">
<label id="menu-button-label">JS:</label>
<input type="checkbox" id="menu-button">
</div>
</div>
并执行元件有边距来开始? jQuery需要动画的起点 – adeneo
请参阅https://jsfiddle.net/2h3qt60o/ –
像@FastSnail解决或做切换与转换类:) –