Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent this strange jQuery .animate() lag?

See demo: jsFiddle

  • I have a simple form that is being toggled when clicking 'show' / 'cancel'
  • Everything works fine, but if you click 'cancel' shortly after the form is revealed, there's a good 2-3 seconds lag before the animation even begins.
  • This doesn't happen if you wait a few seconds before clicking 'cancel'.
  • The lag occures in all tested browsers (ie, ff, chrome).

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 });
            });
        });
    }
}
like image 843
Roy Avatar asked Jan 30 '13 20:01

Roy


People also ask

How do you stop the currently running animation in jQuery?

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).

What does jQuery animate do?

The jQuery animate() method is used to create custom animations.

What is the default easing used for jQuery animation?

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 .

Can the jQuery animate () method be used to animate any CSS property?

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.


Video Answer


2 Answers

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.

like image 131
Plynx Avatar answered Jan 17 '23 12:01

Plynx


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);
        });
    });
}
like image 38
Barlas Apaydin Avatar answered Jan 17 '23 12:01

Barlas Apaydin