부트 스트랩 대화 상자 : 애니메이션 크기 변경

Question

전자 메일과 암호를 묻는 로그인 양식의 간단한 부트 스트랩 대화 상자가 있습니다. 사용자가 가입에 필요한 추가 필드를 표시하는 계정을 만들 수있는 하단 링크가 있습니다. 추가 필드가 표시되고이를 표시하기 위해 대화 상자의 크기가 조정됩니다. 대화 상자의 변화하는 크기를 어떻게 움직이게합니까?

https://jsfiddle.net/w2nj33kb/

대화 HTML :

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#signin-dialog">Sign in</a> 

<!-- Modal --> 
<div id="signin-dialog" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Sign in</h4> 
     </div> 
     <form> 
     <div class="modal-body"> 
     <div class="form-group"> 
      <input type="email" placeholder="Email" name="email"/> 
     </div> 
     <div class="form-group"> 
      <input type="password" placeholder="Password" name="password"/> 
     </div> 
     <div class="signup-fields"> 
      <div class="form-group"> 
       <input type="password" placeholder="Confirm password" name="password2"/> 
      </div> 
      <div class="form-group"> 
       <div>Email options:</div> 
       <div class="email-options"> 
        <label> 
        <input type="checkbox" name="newsletter" value="1" checked="checked"/> 
        Newsletter</label> 

        <label> 
        <input type="checkbox" name="news-alerts" value="1"/> 
        News Alerts</label> 

       </div> 
       <div class="clearfix"></div> 
      </div> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <div class="modal-footer-options col-sm-8"> 
      <span class="modal-footer-signup">Not a member? <a href="#">Sign up</a> to track stocks and receive alerts.</span> 
      <span class="modal-footer-signin">Already a member? <a href="#">Sign in</a> to access your stocks.</span> 
     </div> 
     <div class="modal-footer-buttons col-sm-4"> 
      <button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button> 
     </div> 
     </div> 
     </form> 
    </div> 
    </div> 
</div> 

자바 스크립트 :

<script type="text/javascript"> 
    (function($) { 

     $('.modal-footer-signup a').on('click', function(event) { 
      event.preventDefault(); 
      $('#signin-dialog').addClass('signup'); 

      $('.signup-fields').fadeIn(1000); 
      $('.modal-footer-signup').fadeOut(500, function() { 
       $('.modal-footer-signin').fadeIn(500); 
      }); 
     }); 
     $('.modal-footer-signin a').on('click', function(event) { 
      event.preventDefault(); 
      $('#signin-dialog').removeClass('signup'); 

      $('.signup-fields').fadeOut(500); 
      $('.modal-footer-signin').fadeOut(500, function() { 
       $('.modal-footer-signup').fadeIn(500); 
      }); 
     }); 
    })(jQuery); 
</script> 

Answer 1

난 당신이 "애니메이션"무슨 뜻인지 정확히 모르겠지만 당신이 당신 .fadeIn 대체 할 수 있으며, .slideUp 및 .slideDown .fadeOut. 이것이 "애니메이션"의 의미가 아니라면 사과드립니다.

$('.modal-footer-signup a').on('click', function(event) { 
     event.preventDefault(); 
     $('#signin-dialog').addClass('signup'); 

     $('.signup-fields').slideDown(500); 
     $('.modal-footer-signup').fadeOut(500, function() { 
      $('.modal-footer-signin').fadeIn(500); 
     }); 
    }); 
    $('.modal-footer-signin a').on('click', function(event) { 
     event.preventDefault(); 
     $('#signin-dialog').removeClass('signup'); 

     $('.signup-fields').slideUp(500); 
     $('.modal-footer-signin').fadeOut(500, function() { 
      $('.modal-footer-signup').fadeIn(500); 
     }); 
    });