jQuery jquery动画完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14334933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery animate complete
提问by Mr chinpansee
<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>
I'm wondering why the complete: function()is not working, anyone who can give me advice?
我想知道为什么complete: function()不起作用，谁能给我建议？
Also this is the working script, but it breaks once you click on the button. After an second or two it works like intended.
这也是工作脚本，但是一旦您单击按钮它就会中断。一两秒钟后，它按预期工作。
<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>
回答by Jai
Just seen your comment and changed my answer to this: http://jsfiddle.net/t3ttW/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")
});
回答by James Donnelly
$(".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>')
});
回答by Kevin Bowersox
The callback function to be called when an animation completes is a parameter to the animate function. Currently the code is not passing the function as a parameter.
动画完成时要调用的回调函数是 animate 函数的参数。目前，代码没有将该函数作为参数传递。
