Question

我有一个直接的功能，可以在我的登录页面上为我的徽标和登录表单创建一个漂亮的淡入淡出效果，如下所示。

$(document).ready(function(){
    $('.LoginWrapper').css('opacity', '0')
    $('.SubtleEntrance').hide().fadeIn(1000, function(){
       $('.LoginWrapper').animate({
        opacity: 1
        }, 250, function() {
      })
     })
   });

logo（id = SubtleEntrance）淡入，然后出现包含登录名的loginwrapper。简单。

我正在尝试使用bootstrap

在表单上实现有状态提交按钮

$(document).ready(function(){
    $("#LoadingSignIn").on('click', function(event) {
    var btn = $('#LoadingSignIn').button('loading');
    setTimeout(function () {
        btn.button('reset');
       }, 3000);
     })
  });

如果我有上面的代码为我的按钮创建有状态效果，它只能在我没有实现loginwrapper效果的情况下工作。

我试过

 $(document).ready(function(){
    $('.LoginWrapper').css('opacity', '0')
    $('.SubtleEntrance').hide().fadeIn(1000, function(){
    $('.LoginWrapper').animate({
        opacity: 1
        }, 250, function() {
    })

      $("#LoadingSignIn").on('click', function(event) {
        var btn = $('#LoadingSignIn').button('loading');
        setTimeout(function () {
            btn.button('reset');
        }, 3000);
      })
    })
  });

但没有运气。很明显，当我有loginwrapper效果时，状态按钮功能在某种程度上不会被绑定按钮。如何将此有状态按钮功能与动画loginwrapper结合使用？

编辑：

这是表单基本结构（它是一个Rails应用程序）

             <div class = "SubtleEntrance"><!--subtle entrance-->
                <div class = "logoHolder">
                  LOGO
                </div>
             </div>

             <div class ="LoginWrapper"><!--login wrapper-->

                <%= form_for(resource, as: resource_name, url: session_path(resource_name), html: { role: "form" }) do |f| %>
                <%= f.email_field :email, autofocus: true, class: "form-control", :placeholder => "Email" %>
                <%= f.password_field :password, class: "form-control", :placeholder => "Password" %>
                <%= f.submit  t('.sign_in', :default => "Sign in"), class: "btn btn-primary", id: "LoadingSignIn", style: "width:100%", data: { "loading-text" => "Signing in..." } %>
                <% end %>

            </div>

JQuery有状态按钮功能无法绑定到动画“Fadein”中的按钮以

0 个答案: