引导对话框:动画大小的变化

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>

JavaScript:

<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

我不太确定你的意思是"动画"，但你可以用。slideup和。slidedown替换你的。fadein和。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);
        });
    });