jquery - Bootstrap 对话框 : Animate size changes

Question

我有一个简单的 Bootstrap 对话框，用于登录表单，要求输入电子邮件和密码。我在底部有一个链接，供用户创建一个显示注册所需的附加字段的帐户。显示附加字段并调整对话框大小以显示它们。如何为对话框的大小变化设置动画？

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

我不太确定您所说的“动画”是什么意思，但您可以将 .fadeIn 和 .fadeOut 替换为 .slideUp 和 .slideDown。如果这不是您所说的“动画”的意思，我们深表歉意。

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