Jump to content
GreenSock

4foot30

jQuery addClass() and Tweenlite interfering with each other?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I've run into a strange problem with Tweenlite beta 1.9.0 and jQuery 1.9.1, so far only in Firefox (fine in Chrome).

 

Given this:

nextButton.addClass('scrolling');

// Kill any running scrolling animation
TweenLite.killTweensOf($('#thumbnails'));

// Tween to new target position
TweenLite.to($('#thumbnails'), 1, {marginLeft:targetPosition, ease:Power1.easeInOut, onComplete:function() {

	// Remove scrolling class so the button can be clicked again (if it's not disabled)
	nextButton.removeClass('scrolling');

}});

...I've found that in Firefox the class 'scrolling' is only being added to nextButton when the tween finishes - nothing happens before the tween starts.

 

I've tried the above code as well as trying to add the class in the tween onStart function - same problem.

 

Strangely if I increase the duration of the tween to about 2 seconds, the problem goes away and the class is applied when it should be.

 

If anyone has any thoughts I'd appreciate it, I assume I'm just doing something stupid...

 

Thanks!

 

Gareth J

 

 

Link to comment
Share on other sites

Hi Gareth,

 

Are you absolutely sure that

nextButton.addClass('scrolling');
is not working? Try the following and see if you get a contrary result:
nextButton.addClass('scrolling');
TweenLite.to($('#thumbnails'), 1, {marginLeft:targetPosition, ease:Power1.easeInOut, onComplete:function() {
	nextButton.removeClass('scrolling');
}, onUpdate:function() {
	console.log(nextButton.is('.scrolling')); // should be true for the duration of the Tween
}});

If you are basing this off of the DOM inspector/firebug only, then I might suggest that it probably is being added, but the update rate of firebug is not letting you see it at the exact moment it is actually added (inspectors try to take as little resources as possible so that normal browser processes aren't significantly affected, which usually results in some delay in updates for the DOM inspector - especially when tweens are updating DOM values multiple times a second).

 

If some of your code is relying on nextButton having class .scolling while the tween is running and it isn't working, could you isolate just the HTML and javascript that exhibits this problem in a small demo (

See the Pen KaorG by GreenSock (@GreenSock) on CodePen

and jsfiddle.net are great for this) so we can have a better look at it?

  • Like 1
Link to comment
Share on other sites

Thanks a ton for jumping in, Jamie. My thoughts exactly. I'm curious if the class NOT being added was being verified via inspection tools or the actual appearance/behavior of the element on the page.

 

4foot30,

 

Here is a starter pen that you can fork and edit.

See the Pen KaorG by GreenSock (@GreenSock) on CodePen

 

It is configured to load TweenMax 1.9.0 and latest jQuery.

We'd love to help you through this and it would be most useful to have an example that we can test and inspect.

 

Thanks!

Link to comment
Share on other sites

Hello - thanks for your help both, this is brilliant.

 

You've nailed it - there's nothing wrong with the code, Firebug simply wasn't updating fast enough to show me that the new class was there.

 

At the time I posted, I had only added the add/remove class code, which didn't appear to be working.  When I wrapped all that in more code to actually stop the scrolling function from executing when the button(s) had a class of "scrolling" it all worked perfectly.

 

Thanks again,

 

Gareth

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×