jQuery表单提交/效果改进？

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()函数中创建它。以下是来自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);
    } 
}); 

所有的动作都发生在"header“目录中...

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);
        } 
    }); 
    }); 
});