开发者

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

开发者 https://www.devze.com 2023-03-05 22:19 出处:网络
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 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.


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!


We can be here all day trying to guess your animation but here it is just play about with the values of the list below.

var rotation = function (){
   $("#img").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){        // 
          return c*(t/d)+b;
      }
   });
}
rotation();
  • t: current time
  • b: begInnIng value
  • c: change In value
  • d: duration


please check this for j query image rotating examples :

http://code.google.com/p/jqueryrotate/wiki/Examples

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号