jQuery的动画（）函数不动画

2016-05-17 104 views 0 likes

在我的节目我试图动画<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); 
     } 
    });

来源

2016-05-17 Sheku Kanneh

并执行元件有边距来开始？ jQuery需要动画的起点 – adeneo

请参阅https://jsfiddle.net/2h3qt60o/ –

像@FastSnail解决或做切换与转换类:) –

回答

我做了一些改变你的代码，但基本上现在我在一个潜水应用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>

来源

2016-05-17 01:09:46

jQuery的动画（）函数不动画

回答

相关问题