Mysterious delay between my jQuery animation

I have attached sample code of jQuery animations I've been playing around with. When any of the buttons are clicked, the effects plays out immediately. I have also attached dblclick events on all buttons to reverse the effect. I noticed that after every dblclick, there is about a 1 to 2 second delay before the effect reversal plays out.

Can anyone explain to me why this is happening, and how do I correct it? Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Animating an Element</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#right").click(function() {
                $("#theDiv").animate({ width: "500px" }, 1000);
            });
            $("#right").dblclick(function() {
                $("#theDiv").animate({ width: "250px" }, 1000);
            });
            $("#text").click(function() {
                $("#theDiv").animate({ fontSize: "24pt" }, 1000);
            });
            $("#text").dblclick(function() {
                $("#theDiv").animate({ fontSize: "16pt" }, 1000);
            });
            $("#toggle").click(function() {
                $("#theDiv").animate({ left: "500" }, 1000, "swing");
            });
            $("#toggle").dblclick(function() {
                $("#theDiv").animate({ left: "0" }, 1000, "swing");
            });
            $("#multiple").click(function() {
                $("#theDiv").animate({ width: "500px", fontSize: "24pt", left: "500" }, 1000, "linear");
            });
            $("#multiple").dblclick(function() {
                $("#theDiv").animate({ width: "250px", fontSize: "16pt", left: "0" }, 1000, "linear");
            });
        });
    </script>
    <style type="text/css">
        div#theDiv {
            position:relative;
            width: 250px;
            height: 180px;
            margin: 10px;
            padding: 20px;
            background: cyan;
            border: 2px solid black;
            cursor: pointer;
        }
        p, span {
            font-size: 16pt;
        }
        button {
            margin: 5px;
        }
    </style>
</head>
<body>
    <p>
        Animating an Element</p>
    <div id="theDiv">Animate Me</div>
    Double-click buttons to reverse the effect.<br/>
    <button id="right">Grow Right</button>
    <button id="text">Big Text</button>
    <button id="toggle">Move Div</button>
    <button id="multiple">Everything</button>
</body>
</html>

Open in new window

elepilAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Because a double click is two clicks.

Three options:
Replace the single click element with a double click element when it is clicked once

Or unbind the single click event and rebind it when the double click event fires.

You could also have a click counter and count the clicks and do a modular check on the value - i.e. if 1 then don't fire the single click and let the double click fire and reset the click counter to 0
0
elepilAuthor Commented:
Gary, your suggestions seem to address the issue of a click event automatically occurring when I double-click. I am not seeing how that explains the delay.

Here's a brief code sample that is similar to my previous sample where a click and double-click can occur WITHOUT a delay in between:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
#myDiv {
	width: 300px;
	height: 300px;
	background-color: #999;
	overflow-y: auto;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("document").ready(function() {
	$( "#myDiv" ).click(function(e) {
		var value = $("#myDiv").html();
	  	$("#myDiv").html("You clicked me.<br/>" + value);
	});
	$( "#myDiv" ).dblclick(function(e) {
	  	var value = $("#myDiv").html();
	  	$("#myDiv").html("You DBLlicked me.<br/>" + value);
	});
});
</script>
</head>
<body>
<div id="myDiv">You can click and dblclick me.</div>
</body>
</html>

Open in new window


I do appreciate your explanation, but I fail to understand how it addresses the delay, so please advise.
0
GaryCommented:
Your second example is an immediate action - just changing the HTML
The first example is an animation each lasting 1 second - animations are queued.
One click and the animation starts, second click animation starts again then fires the double click

I haven't tried this, and don't know why I didn't think of it initially, but you could try .stop() on the animation to cancel it.

$("#theDiv").stop().animate({ width: "500px" }, 1000);
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

GaryCommented:
0
GaryCommented:
One click and the animation starts, second click animation starts again then fires the double click
You would see this if the animation was incremental
0
elepilAuthor Commented:
Gary, you said "The first example is an animation each lasting 1 second - animations are queued." What you are saying is that every time I dblclick, the single click animation will execute first for 1 second before executing the dblclick animation, right?

I tried adding the stop() like this:

$("#right").dblclick(function() {
		$("#theDiv").stop().animate({ width: "500px" }, 1000); 
                $("#theDiv").animate({ width: "250px" }, 1000);
            });

Open in new window


but it didn't work.

Can you please modify my first sample with your modifications to demonstrate that the delay is gone? Thanks.
0
GaryCommented:
See the fiddle just above.
0
elepilAuthor Commented:
I got it. Thanks for your help, Gary!
0
elepilAuthor Commented:
By the way, Gary, I am beginning to appreciate jsfiddle.net. Has that worked out for you all the time? Or does it have occasional issues?
0
GaryCommented:
Works fine for me pretty much all the time, there is also

http://codepen.io/pen/
and
http://jsbin.com/
0
elepilAuthor Commented:
Thanks for those links, Gary!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.