jQuery animate()函数没有动画

时间:2016-05-17 00:34:59

标签: javascript jquery html css animation

我正在尝试用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>

1 个答案:

答案 0 :(得分:0)

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

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

&#13;
&#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;
&#13;
&#13;