Search code examples
jqueryimageanimationautorotate

Trying to make an Image Rotate (jQuery Animation) On Page Load to Specific Degree


I have an amplifier knob that I'd like to turn to a certain degree upon page load. I'm trying to use this jQuery library: http://code.google.com/p/jqueryrotate/

I just don't know how to set it up properly. I was able to use the webkit to rotate the image, but I want there to be an animation. If anyone can let me know how to properly use the library I'd greatly appreciate it!

Remember, I need to have the rotation occur on page load. Ideally, the animation would repeat after 5-10 seconds. Looking forward to your help.


Solution

  • everything is set up fine on tonesettings.com/rotate. the only issue you have is that you're calling the rotation() function before the page has completed loading. you can just move it into an on ready status and it should trigger on page load.

    Change the following:

    <script type="text/javascript">
    var rotation = function (){
       $("#img").rotate({
          angle:0, 
          animateTo:360, 
          callback: rotation
       });
    }
    rotation();
    </script>
    

    to:

    <script type="text/javascript">
    var rotation = function (){
       $("#img").rotate({
          angle:0, 
          animateTo:360, 
          callback: rotation
       });
    }
    $(document).ready(function() {
        rotation();
    });
    </script>
    

    Hope this helped!