Jump to content
Search Community

Tween not working after jquery.empty and reload with ajax

Bel test
Moderator Tag

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

Hi,

I have been loading a html file (including tweening) using ajax into a div and on first viewing the Tweens are working. However after clearing the div with jquery.empty() and reloading the same html file the tweens are no longer working in Firefox.

 

To view an example please download attached files (sorry it's very basic).

- Unzip and click on index.html.

- Clicking on "Click to load file into div" will load the test.html file into a div of index.html.

- Two images will come up. When mousing over the images boxes with text will appear.

- Clicking on "Empty Div" will remove contents of div with .empty()

- Clicking on "Click to load file into div" will bring in the test.html again but the tweens no longer work.

 

This behaviour only happens when first firing the tweens. If you refresh the browser and click to add and remove the html the tweens will still work the first time.

 

The Tweens work fine in IE9 but are not working in Firefox 20.

 

Does anyone know why the tweens would not work the second time in Firefox? Any help would be great.

 

Thanks :)

 

test.zip

Link to comment
Share on other sites

Hi,

 

The problem was with calling the tweens targets the right way and honestly I have no idea why it was working on the first place, maybe someone with more knowledge could give us some light in that matter. Your code in test.html was this:

$("#scales").mouseenter(function(){
$("#tipLeft").html('<h1>Weighing Scales</h1>Different sizes are used for different purposes. When receiving goods a large floor scale with a hook attachment is used to measure and check whole boxes and large pieces of meat. For dial scales it is important to be aware of the minimum amount the scale can register. Digital scales are more practical as they show the exact weight, however you should check their maximum capacity.');
		TweenLite.to(tipLeft, 0.1, {left:"280px", top:"20px", ease:Power1.easeInOut});
		TweenLite.to(tipLeft, 0.1,{autoAlpha:0.9});
		TweenLite.to(scales, 0.1, {scale:1.05}); 
                TweenLite.to(tipRight, 0,{autoAlpha:0}); 
}).mouseleave(function(){
		TweenLite.to(tipLeft, 0,{autoAlpha:0}); 
		TweenLite.to(scales, 0.1, {scale:1}); 
});

The main problem is that you have your tween pointing to scales, tipLeft and tipRight, but in the code of test.html and index.html their are never defined as variables, that's why I don't know how it was working on the first place.

 

If you change that code to this:

$("#scales").mouseenter(function(){
$("#tipLeft").html('<h1>Weighing Scales</h1>Different sizes are used for different purposes. When receiving goods a large floor scale with a hook attachment is used to measure and check whole boxes and large pieces of meat. For dial scales it is important to be aware of the minimum amount the scale can register. Digital scales are more practical as they show the exact weight, however you should check their maximum capacity.');
		TweenLite.to($("#tipLeft"), 0.1, {left:"280px", top:"20px", ease:Power1.easeInOut});
		TweenLite.to($("#tipLeft"), 0.1,{autoAlpha:0.9});
		TweenLite.to($("#scales"), 0.1, {scale:1.05}); 
                TweenLite.to($("#tipRight"), 0,{autoAlpha:0}); 
}).mouseleave(function(){
		TweenLite.to($("#tipLeft"), 0,{autoAlpha:0}); 
		TweenLite.to($("#scales"), 0.1, {scale:1}); 
});

It works after loading the elements again in firefox 20 on win7.

 

I've changed the files so you can check it.

 

Hope this helps,

Cheers,

Rodrigo.

 

 

  • Like 1
Link to comment
Share on other sites

Yeah, Rodrigo is exactly right. I learned this the hard way once. Some browsers will automatically associate var names with IDs, but FireFox isn't that sloppy.

 

The following will work in Chrome (and others) without ever defining box1 as a variable that points to a DOM element.

//html
<div class="box" id="box1"</div>

//js
TweenLite.to(box1, 2, {left:200, rotation:360, scale:2});
  • Like 2
Link to comment
Share on other sites

Thanks for the info Carl, everyday you learn something new.

 

But what threw me off here is the fact that using the original code posted by Bel the first time you call the ajax function in firefox it actually works and in successive calls it doesn't work anymore.

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hi Rodrigo and Carl,

 

That all makes perfect sense! It also threw me off working the first time. I've updated my code and everything is working without a glitch

 

Thanks so much for your help it was fantastic :)

 

Bel

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.
×
×
  • Create New...