See demo: jsFiddle
1. What could cause this lag and how can it be prevented?
2. Is there a better way of coding this sequence of animations, that might prevent any lags?
HTML:
<div id="newResFormWrap">
<form id="newResForm" action="" method="post" name="newRes">
<div id="newResFormCont">
<h3>title</h3>
<p>form!</p>
<div class="button" id="cancelNewRes">Cancel</div>
</div>
</form>
</div>
<div class="button" id="addRes">show</div>
jQuery:
$("#newResForm").css({opacity: 0});
$("#addRes").click(function () {
toggleNewRes()
});
$("#cancelNewRes").click(function () {
toggleNewRes()
});
//toggleNewRes
function toggleNewRes() {
if ($("#newResFormWrap").css('display') == "none") {//if hidden
$("#addRes").animate({ opacity: 0 }, 'fast', function() {
$("#newResFormWrap").toggle('fast', function (){
$("#newResForm").animate({ opacity: 100 },2000);
});
});
} else { //if visible
$("#newResForm").animate({ opacity: 0 }, 100,function() {
$("#newResFormWrap").toggle('fast', function (){
$("#addRes").animate({ opacity: 100 });
});
});
}
}
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 is used to create custom animations.
An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing , and one that progresses at a constant pace, called linear .
The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable.
Make sure to clear the queue when starting a new animation with stop()
:
$("#newResForm").stop().animate({ opacity: 0 }, 100,function() {
$("#newResFormWrap").toggle('fast', function (){
$("#addRes").animate({ opacity: 100 });
// ...
What's causing the lag is the fact that your long 2-second animation $("#newResForm").animate({ opacity: 100 },2000)
isn't finished yet. JQuery puts animations by default into a queue, waiting for one to finish before the next begins. You clear the queue with stop()
, which is especially useful if you have two contradicting animations (like an open and close animation, or a mouseover/mouseout animation). In fact you might find it a good practice to begin all your animation chains with stop()
unless you know you want them to queue with prior animations that may have occurred elsewhere.
Getting into more advanced topics, you can even name different queues, so that for example your hover animations and your expand/collapse animations are treated separately for the purposes of stop()
. See the queue
option (when given a string) at http://api.jquery.com/animate/ for more details.
Try to use stop()
:
Here is jsfiddle.
if ($("#newResFormWrap").is(':visible')) {//this way is eaiser to check
$("#addRes").stop(true,false).animate({ opacity: 0 }, 'fast', function() {
$("#newResFormWrap").toggle('fast', function (){
$("#newResForm").animate({ opacity: 100 },2000);
});
});
}
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