web-dev-qa-db-ja.com

jqueryアニメート完了

_<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()が機能しない理由を知りたいのですが、アドバイスしてくれる人はいますか？

また、これは作業スクリプトですが、ボタンをクリックすると中断します。 1〜2秒後、意図したとおりに機能します。

_    <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>
_
jqueryanimationjquery-animatecomplete
13
Mr chinpansee

あなたのコメントを見て、これに対する私の答えを変更しました： 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")
    });
30
Jai
    $(".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>')
    });
7
James Donnelly

アニメーションが完了したときに呼び出されるコールバック関数は、アニメーション関数のパラメーターです。現在、コードは関数をパラメーターとして渡していません。

3
Kevin Bowersox