jQuery animiert() Funktion animiert nicht

Question

Ich versuche, eine Animation in JavaScript zu programmieren und ich habe Probleme

In meinem Programm Ich versuche, die <label> ‚s margin-top aber es doesn‘ zu animieren t passiert so, wie ich es will.

z.B.

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

Die margin-top CSS-Eigenschaft ändert, aber es passiert in der ein Wimpernschlag, anstatt sanft bewegt.

Hier ist mein 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); 
     } 
    }); 

Answer 1

ich im Code einige Änderungen haben, aber im Grunde jetzt MarginTop in einem Tauchgang ich aufbringt und In diesem Tauchgang hast du dein Label.

nehmen ein Faltenbalgbefestigung Code aussehen, denke ich, werden Sie

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