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

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.