Question

我正在制作一个使用jQuery ajax.form插件提交的下滑登录表单。效果有效，提交有效。但是当你把它们放在一起时它们就不起作用......

这适用于表达式引擎，因此{if}标签只是EE条件。一旦用户登录就看到内容发生了变化 - 我只需要重新加载以便内容发生变化 - 我认为做一堆.html（）会更容易重写...... 提交表单后，正确的内容会重新加载并且可以点击，但“#panel”不会重新制作动画。

<div id="client-login">
<div class="wrap">
<p  class="work-message">We're doing some work under the hood!  If things get/are funky, please excuse us!</p>
    {if logged_out}
    <div id="client" class="login">Client Login</div>
    {/if}
    {if logged_in}
    <div id="client" class="login">Hey, {username}!</div>
    {/if}
</div>
</div>
<div id="panel">
    <div id="panel-content" class="wrap">
    {if logged_out}
    {exp:member:login_form id="login-form"}
    <ul>
    <li>
    <label><span>Username</span></label>
    <input type="text" name="username" value="" maxlength="32" class="input" size="25" />
    </li>
    <li>
    <label><span>Password</span></label>
    <input type="password" name="password" value="" maxlength="32" class="input" size="25" />
    </li>
    <li class="login-forgot">
    <a href="{path='member/forgot_password'}">Forgot your password?</a>
    </li>
    {if auto_login}
    <li class="checkbox">
    <input class='checkbox' type='checkbox' name='auto_login' value='1' /> Auto-login on future visits
    </li>
    {/if}
    </ul>
    <p>
    <input type="submit" id="panelsubmit" name="submit" value="Submit" />
    </p>
    {/exp:member:login_form}
    {/if}
    <div id="messages">
    <p></p>
    </div>
{if logged_in}
    <div id="logout">
        <h2>What do ya wanna' do?!</h2>
        <form id="login-form" >

          <input type="hidden" name="ACT" value="10" />

          <input type="submit" value="Log Out" />

        </form> 
    </div>
{/if}

$(document).ready(function()
{
$('.login').toggle(
function()
{
  $('#panel').stop().animate({
  height: "150", 
  padding:"20px 0",
  backgroundColor:'rgba(0,0,0,0.8)',
 }, 500);
 $('#client-login').stop().animate({
  backgroundColor:'rgba(0,0,0,0.8)',
 }, 500);
},
function()
{
  $('#panel').stop().animate({
    backgroundColor:'rgba(0,0,0,0.2)',
  height: "0", 
  padding:"0px 0",
  }, 500);     
 $('#client-login').stop().animate({
  backgroundColor:'rgba(0,0,0,0.2)',
 }, 500);

});

    $('#login-form').ajaxForm({  
        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function() { 
            $("#client").remove().fadeOut("fast");
            $("#client-login").load("/ #client-login").fadeIn("fast");
            $("#panel-content").remove().fadeOut("fast");
            $("#panel").load("/ #panel-content").fadeIn("fast");

        } 
    }); 
});

功能基本上是存在的，但是表单需要像以前一样提交后才能工作！此外，.remove的动画不起作用。我是JavaScript的新手，我不知道如何改进它。

Answer 1

由于您是通过AJAX加载内容，因此重新加载之前存在的动画和功能将不再起作用，因为效果仅绑定到原始元素。要解决此问题，您需要将加载的内容重新绑定到动画等

有几种方法可以做到这一点。首先，您可以将动画功能重新应用于加载的内容。例如，一旦加载了内容，就调用一个将动画重新绑定到新元素的函数。

其次，更容易，您可以使用jQuery live（）函数。 在我看来，这是更好的方法。 live（）函数绑定所有当前和未来元素，而不是仅绑定当前元素。因此，在创建动画时，请在live（）函数中创建它。以下是http://docs.jquery.com/Events/live的使用示例：

$("p").live("click", function(){
  $(this).after("<p>Another paragraph!</p>");
});

Answer 2

$('.login').toggle(
function()
{
          $('#panel').stop().animate({
          height: "150", 
          padding:"20px 0",
          backgroundColor:'rgba(0,0,0,0.8)',
         }, 500);
         $('#client-login').stop().animate({
          backgroundColor:'rgba(0,0,0,0.8)',
         }, 500);
    },
    function()
    {
          $('#panel').stop().animate({
            backgroundColor:'rgba(0,0,0,0.2)',
          height: "0", 
          padding:"0px 0",
          }, 500);     
         $('#client-login').stop().animate({
          backgroundColor:'rgba(0,0,0,0.2)',
         }, 500);

}）;

$('#login-form').ajaxForm({  
    // success identifies the function to invoke when the server response 
    // has been received; here we apply a fade-in effect to the new content 
    success: function() { 
        $("#client-login .wrap").fadeOut('slow');
        $("#client-login .wrap").remove();          
        $("#client-login").load("/ #client-login").fadeIn(2000);
        $("#panel-content").fadeOut('slow');
        $("#panel").load("/ #panel-content").fadeIn(2000);
         $('#panel').animate({
            backgroundColor:'rgba(0,0,0,0.2)',
          height: "0", 
          padding:"0px 0",
          }, 500);   
         $('#client-login').animate({
          backgroundColor:'rgba(0,0,0,0.2)',
         }, 500);
    } 
});

所有动作都发生在“标题”div ...

Answer 3

好吧，这就是我所拥有的，似乎有效...... 有更好的方法吗？

$(document).ready(function()
{
$("#client-login").css({backgroundColor:'rgba(0,0,0,0.2)'});
$(".login").live('mouseover', function(){ 
    $(".login").toggle(
    function()
    {
              $('#panel').stop().animate({
              height: "150", 
              padding:"20px 0",
              backgroundColor:'rgba(0,0,0,0.8)',
             }, 500);
             $('#client-login').stop().animate({
              backgroundColor:'rgba(0,0,0,0.8)',
             }, 500);
        },
    function()
    {
              $('#panel').stop().animate({
                backgroundColor:'rgba(0,0,0,0.2)',
              height: "0", 
              padding:"0px 0",
              }, 500);     
             $('#client-login').stop().animate({
              backgroundColor:'rgba(0,0,0,0.2)',
             }, 500);
});
});
$(".login").live('mouseover', function(){ 

    $('#login-form').ajaxForm({  
        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function() { 
            $("#client-login .wrap").fadeOut('slow');
            $("#client-login .wrap").remove();          
            $("#client-login").load("/ #client-login").fadeIn(2000);
            $("#panel-content").fadeOut('slow');
            $("#panel").load("/ #panel-content").fadeIn(2000);
             $('#panel').animate({
                backgroundColor:'rgba(0,0,0,0.0)',
              height: "0", 
              padding:"0px 0",
              }, 500);   
             $('#client-login').animate({
              backgroundColor:'rgba(0,0,0,0.2)',
             }, 500);
        } 
    }); 
    }); 
});

Answer 4

我明白了！

$(document).ready(function(){
    $("#client-login").css({backgroundColor: 'rgba(0,0,0,0.2)'});
    var speed = 300;
    var openpanel = function() {
            $("#client-login").stop().animate({
                backgroundColor: 'rgba(0,0,0,0.8)'
                },speed);
            $("#panel").stop().animate({
                backgroundColor: 'rgba(0,0,0,0.8)',
                height: '200px'
                },speed);
            $('#panel').removeClass("closed");
        };
    var closepanel = function() {
            $("#client-login").stop().animate({
                backgroundColor: 'rgba(0,0,0,0.2)'
                },speed);
            $("#panel").stop().animate({
                backgroundColor: 'rgba(0,0,0,0.2)',
                height: '0px'
                },speed);
            $('#panel').addClass("closed");
        };
    $(".login").live("click",function() {
       if ($("#panel").hasClass("closed"))
       {
            openpanel();
       } else {
            closepanel();
       };
    $('#login-form').ajaxForm({
      // success identifies the function to invoke when the server response
      // has been received; here we apply a fade-in effect to the new content
      success: function() {
        closepanel();
        $("#client-login").load("/ #client-login");
        $("#panel").load("/ #panel-content", 1000);
        }
    });
    });
});

谢谢你的帮助，詹姆斯！

jQuery表单提交/效果改进？

4 个答案: