jquery动画完成答案

【问题标题】：jquery animate completejquery动画完成
【发布时间】：2012-12-29 09:16:06
【问题描述】：

<div class="factuuradres"></br><h3></h3></div>
<div class="factuuradresbutton">Meer Informatie</div>           

<script type="text/javascript">
    $(".factuuradresbutton").toggle(function(){
        $(".factuuradres").animate({
            height: "310px"
        }, 500 );
        complete: function() {
            $(".factuuradresbutton").html("Toch geen factuuradres")
            $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>')
        }
    },

    function(){
        $(".factuuradres").animate({
            height: "160px"
        }, 500 );
        $(".factuuradresbutton").html("Ander factuuradres?")
        $(".factuuradres").html("Factuuradres")
    });
</script>

我想知道为什么complete: function() 不起作用，谁能给我建议？

这也是工作脚本，但是一旦您单击按钮，它就会中断。一两秒钟后，它会按预期工作。

<script type="text/javascript">
    $(".factuuradresbutton").toggle(function(){
    $(".factuuradres").animate({
        height: "610px"
    }, 500 );
    $(".factuuradresbutton").html("Toch geen factuuradres")
    $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>')
    },
    function(){
    $(".factuuradres").animate({
        height: "160px"
    }, 500 );
    $(".factuuradresbutton").html("Ander factuuradres?")
    $(".factuuradres").html("Factuuradres")
    });
</script>

【问题讨论】：

你在哪里调用完整的函数？您的动画通话以 ) 结束； 500后
检查控制台。您的答案将是那里的语法错误。
您的语法不正确。通过JSHint 运行您的代码。
尝试将success函数作为animate的回调函数。
jsfiddle.net/t3ttW 当前正在使用（和工作）脚本。

标签： javascript jquery animation jquery-animate

【解决方案1】：

刚刚看到您的评论并更改了我的答案：http://jsfiddle.net/t3ttW/1/

$(".factuuradresbutton").toggle(function () {
      $(".factuuradres").animate({
        height: "610px"
      }, {
        duration: 500,
        complete: function () {
          $(".factuuradresbutton").html("Toch geen factuuradres")
          $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>');
        }
      });
    },

    function () {
      $(".factuuradres").animate({
        height: "160px"
      }, 500);
      $(".factuuradresbutton").html("Ander factuuradres?")
      $(".factuuradres").html("Factuuradres")
    });

【讨论】：

我正在使用切换，所以如果我单击按钮，“factuuradres” div 中的文本将可见，但使用此脚本，按钮不再起作用。（查看主帖，更新了一个工作脚本，但我想要完整的功能。

【解决方案2】：

    $(".factuuradres").animate({
        height: "310px"
    }, 500, function() {
        $(".factuuradresbutton").html("Toch geen factuuradres")
        $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>')
    });

【讨论】：

'animate' 的回调方式是错误的。 @Jay 的回答是正确的。

【解决方案3】：

动画完成时调用的回调函数是动画函数的参数。目前代码没有将函数作为参数传递。

【讨论】：

@RinkeDoeser 我喜欢 James Donnelly 的解决方案，它展示了我的措辞所暗示的内容。