jQuery animate（）函数没有动画

I'm trying to program an animation in JavaScript and I'm having issues

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

In my program I'm trying to animate the <label>'s margin-top but it doesn't happen the way I want it.

在我的程序中,我试图为的margin-top设置动画,但它不会按照我想要的方式发生。

e.g.

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

The margin-top css property changes but it happens in the blink of an eye rather than moving smoothly.

margin-top css属性发生了变化,但它发生在眨眼之间,而不是顺利移动。

Here's my code:

这是我的代码:

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

1 个解决方案

#1

I did some changes in your code, but basically now I'm applying marginTop in one dive, and inside this dive have your label.

我在你的代码中做了一些更改,但基本上现在我在一次潜水中应用marginTop,并且在这次潜水中有你的标签。

take a look the bellow code, I think will help you

看看波纹管代码,我想会帮助你

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

1 个解决方案

#1

更多相关文章

随机推荐