Question

我正在尝试用JavaScript编写动画，而我遇到了问题

在我的程序中，我试图为<label>的{{1}}设置动画，但这并不是我想要的方式。

e.g。

margin-top

$('label').animate({marginTop: '0%'},500); css属性会发生变化，但它会在眨眼间发生，而不是顺利移动。

这是我的代码：

HTML

margin-top

JS：

<label id="menu-button-label"><input type="checkbox" id="menu-button"></label>

Answer 1

我对您的代码进行了一些更改，但基本上现在我在一次潜水中应用marginTop，并且在此次潜水中有您的标签。

看一下波纹管代码，我认为会帮助你

＆＃13;

$(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);
       
  });

＆＃13;

.item {
    background: #ccc;
  width: 200px;
    height: 300px;
 
}
.info{
    margin-top: 100px;
  background: red;
  }

＆＃13;

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

＆＃13;

jQuery animate（）函数没有动画

1 个答案: