2 Replies Latest reply on Jun 13, 2009 4:47 AM by stuharto

    Can I use jQuery.animate in my AIR application?

    stuharto

      Hi,

       

      I'm having some issues trying to animate some HTML elements using jQuery.animate. I've got the Color plugin installed (http://plugins.jquery.com/project/color) and I'm trying to transition between two background colors like so:

       

      $('.task').click(function() {

          $(this).animate({ backgroundColor: '#FFF' }, 1000);

      });

       

      The problem is that the transition only 'steps' when the mouse is moved around, or when a timeout function fires. It works fine when I open the document in a web browser, and the type of animation doesn't seem to make a difference.

       

      Has anyone else had any success with this kind of thing? Any help appreciated!

        • 1. Re: Can I use jQuery.animate in my AIR application?
          jbenson@oper8 Level 2

          Using the JQuery 1.3.2 and the latest release of colors I didn't have any issues:

           

          Here's the code I used to test:

           

          $(document).ready(function(){

          $('#aniTest')

               .mouseover(function(){

                         $(this).animate({ backgroundColor: '#FF0000' }, 1000);

               })

               .mouseout(function(){

                    $(this).animate({ backgroundColor: '#FFFFFF' }, 1000);

               });

           

          $('#aniTest').animate({ backgroundColor: '#FFFFFF' }, 1000);

          });

          • 2. Re: Can I use jQuery.animate in my AIR application?
            stuharto Level 1

            OK, I've figured out that it only happens when I attempt to animate elements in a 'secondary' document - i.e. one in a second HTMLLoader. This is the code I'm using:

             

            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);
                   
            });
            }

             

            Is this the correct way to open a second HTML document? Is there any reason why the jQuery animation wouldn't work within a second HTML document?