jQueryのアニメーション（）関数は

Question

をアニメーション化しない私はJavaScriptでアニメーションをプログラムしようとしていると私は私のプログラムでは問題

を抱えている私は<label>アニメーション化しようとしているのmargin-topを、それはdoesnの "私はそれが欲しいと思います。

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

Answer 1

私はあなたのコード内のいくつかの変更をしましたが、基本的に、今、私は1ダイブで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>