<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?
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>
jQuery can be several times slower than CSS when talking about animations. CSS animations and transitions have the advantage of being hardware accelerated by the GPU, which is really good in moving pixels.
The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").
The jQuery stop() method is used to stop an animation or effect before it is finished. The stop() method works for all jQuery effect functions, including sliding, fading and custom animations. Syntax: $(selector).
The jQuery animate() method provides you a way to create custom animations. Syntax: $(selector). animate({params}, speed, callback);
Just seen your comment and changed my answer to this: 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").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>')
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With