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

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.