Question

我有一个简单的引导程序对话框，用于登录表单，询问电子邮件和密码。我在底部有一个链接，供用户创建一个帐户，显示注册所需的其他字段。将显示其他字段，并调整对话框大小以显示它们。如何设置对话框大小的变化动画？

对话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

我不完全确定“animate”是什么意思，但你可以用.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);
        });
    });

Bootstrap对话框：Animate大小更改

1 个答案: