?
Solved

Mysterious delay between my jQuery animation

Posted on 2014-11-30
11
Medium Priority
?
139 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 2000 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
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 
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

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

777 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