Animation in Adobe AIR using jQuery.animate

Question

In my AIR application, I want to animate an HTML element using jQuery. When I attempt the animation in the global HTMLLoader, there is no problem. However, I'm having a problem when attempting to animate elements in a 'secondary' HTMLLoader (i.e. one opened by the original document).

The animation isn't smooth - it only 'steps' when I move the mouse. The animated property (e.g. top, left, etc.) is still updated - it just isn't visible unless the mouse is moved. So if I'm not moving the mouse, the animation completes without seeing any transition between the start and end state.

The type of animation doesn't seem to be significant. I've simplified the code to the following:

var loader;

$(function() {
 loader = new air.HTMLLoader();
 loader.addEventListener(air.Event.COMPLETE, start);
 window.htmlLoader.stage.addChild(loader);
 loader.load(new air.URLRequest('sandbox2.html'));
});

function start() {
 loader.width = loader.window.document.width;
 loader.height = loader.window.document.height;
 $('.task', loader.window.document).click(function() {
  $(this).animate({ backgroundColor: '#c00' }, 1000);
 });
}

I tried loading the equivalent HTML/JS into both Firefox and Safari, and it was fine. I'm running Mac OS X 10.5.

Any ideas? Thanks!

Answer 1

AIR is more like Safari and Chrome. AIR uses Webkit, and it's a bit behind Safari and Chrome in the Webkit version. Can you see how those work?

I've used jQuery in AIR, but I don't think I've used the animate method in AIR.

Also, try to narrow down whether it's something about color (although I can't imagine what). Try something like height instead of color.

Also, why did you have to use noconflict? Do you have another library loaded? I don't remember having to do that.

Answer 2

If it works correctly on Safari but not in Adobe AIR, it looks to me like its a security issue with your jquery app running inside the application sandbox (default but restricted area on Adobe AIR). Please create a non-application sandbox and run your app in there to see if this is a security issue. The non-application sandbox should work exactly like the browser. http://labs.adobe.com/wiki/index.php/AIR:HTML_Security_FAQ

Unlike content in the application security sandbox, JavaScript content in a non-application security sandbox can call the eval() function to execute dynamically generated code at any time. However, there are restrictions to JavaScript in a non-application security sandbox. But these restrictions mirror general browser restrictions.

A non application sandbox can be created easily by using an iframe.

Answer 3

I've had the same issue. The problem lies in that jQuery sets the interval with which the animation needs to be updated on the main window, not on your secondary window context.

I've made a small patch to jQuery 1.3.2 that works for me.