Solved

Use jQuery to check if object is animated

Posted on 2013-06-20
2
367 Views
Last Modified: 2013-06-20
This is my page:
http://sterlingmodular.com/test/plan-series.htm

The arrow graphic on the left side of the row of images near the bottom... if you click it, there is a brief animation to indicate you cannot go any further to the left. If you click it twice very quickly, it will misfire because an animation is already in progress.

I tried using .not(':animated') on the object like this:

$('#arrowleft').click(function(){
	if ($('#imgPlanSeriesContainer').not(':animated')){
		if ($('#imgPlanSeriesContainer').position().left===12){
			$('#imgPlanSeriesContainer').animate({left:'+=20px'}, 200);
			$('#imgPlanSeriesContainer').animate({left:'-=20px'}, 200);
		} else {
			$('#imgPlanSeriesContainer').animate({left:'+=244px'});
		}
	} else {
		console.log('animated');
	}
});

Open in new window


However, it doesn't seem to pick it up. It will allow you to click twice very quickly and still cause it to misfire.

I basically want to say, "if the element is currently being animated, don't do anything". Is there something wrong with my code? I don't get any error messages.

Thank you!
0
Comment
Question by:bbdesign
[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
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39262291
Add a class just before animate and remove it when animation is done :
if ($('#imgPlanSeriesContainer')[b].hasClass('animated')[/b]){
   $('#imgPlanSeriesContainer').[b]addClass("animated")[/b];
   $('#imgPlanSeriesContainer').animate({left:'+=20px'}, 200, function() {
        $('#imgPlanSeriesContainer').[b]removeClass("animated")[/b];    
  });

Open in new window

0
 

Author Comment

by:bbdesign
ID: 39262315
Ah, very clever. This is a technique I think I can reuse often. Thanks!
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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

634 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