Solved

Mysterious delay between my jQuery animation

Posted on 2014-11-30
11
129 Views
Last Modified: 2014-11-30
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

0
Comment
Question by:elepil
  • 6
  • 5
11 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 

Author Comment

by:elepil
Comment Utility
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Comment

by:elepil
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
See the fiddle just above.
0
 

Author Closing Comment

by:elepil
Comment Utility
I got it. Thanks for your help, Gary!
0
 

Author Comment

by:elepil
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Works fine for me pretty much all the time, there is also

http://codepen.io/pen/
and
http://jsbin.com/
0
 

Author Comment

by:elepil
Comment Utility
Thanks for those links, Gary!
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now