jQuery animate(）函数没有't设置动画

jQuery animate() function doesn't animate

本文关键字：设置 动画 animate 函数 jQuery      更新时间：2023-09-26

我正在尝试用JavaScript编写动画，但出现问题

在我的程序中，我试图使<label>的margin-top动画化，但它并没有按照我想要的方式发生

例如

$('label').animate({marginTop: '0%'},500);

margin-topcss属性发生了更改，但它发生在眨眼之间，而不是平稳移动。

这是我的代码：

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>

相关文章：