Solved

Mysterious delay between my jQuery animation

Posted on 2014-11-30
11
135 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40472570
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
ID: 40472625
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
ID: 40472635
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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 58

Expert Comment

by:Gary
ID: 40472636
0
 
LVL 58

Expert Comment

by:Gary
ID: 40472638
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
 

Author Comment

by:elepil
ID: 40472643
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
ID: 40472646
See the fiddle just above.
0
 

Author Closing Comment

by:elepil
ID: 40472647
I got it. Thanks for your help, Gary!
0
 

Author Comment

by:elepil
ID: 40472655
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
ID: 40472660
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
ID: 40472661
Thanks for those links, Gary!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

742 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