带有一些倾斜/旋转的JQuery抖动效果

Question

我正在尝试创建一个效果，在按钮点击时，div会左右摇动，并向每个方向倾斜约10度，这样当用两只手摇动物体时，它看起来就像一个自然的运动。我能够创造左右摇晃的效果，但似乎不能将其与旋转联系起来。我也需要它在IE8中工作，所以css3不是一个选项。我正在使用JQuery UI和.rotate()，但是如果有更好的方法，请让我知道。我需要这个抖动约3-4次的按钮点击。

    <div class="container">
<div class="globe-main" id="globe">
    <div class="content"></div><!-- end .content -->
</div><!-- end .globe-main -->
    </div><!-- end .container -->

    <script>

var times = 4;
var loop = setInterval(rota, 300);

function rota() {
    times--;
    if(times === 0){clearInterval(loop);}
    $(".globe-main").rotate({animateTo:10, duration: 500, });
    //$(".globe-main").effect("shake", { times:3, distance:30 }, 800);

}
rota(); 

    </script>

这是我到目前为止所拥有的FIDDLE

谢谢

更新

以下是更新后的FIDDLE

Answer 1

jQuery没有名为rotate的方法。这可能就是问题所在。

编辑

根据您的评论，我想您可以创建自己的队列...

rotationAnimationQueue = {
   queue: [],
   addAnimation: function( $jQueryObject, params ) {
      // add animation to the queue
      this.queue.push( {
         $jQueryObject: $jQueryObject,
         params: params
      } );
      // if only animation in queue, begin processing
      if ( this.queue.length === 1 ) this.processQueue();
   },
   processQueue: function() {
      var self = this;
      var animation = this.queue[ 0 ];
      animation.params.callback = function() {
         self.queue.shift();
         if ( self.queue.length > 0 ) self.processQueue();
      };
      animation.$jQueryObject.rotate( animation.params );
   }
};

在这里查看它的实际效果：http://jsfiddle.net/UnyYh/1/

您可能希望修改队列代码，使其跟踪每个jQuery对象的一个队列。通过这种方式，如果需要，你可以让多个对象同时发生摇动动画，而不是总是按顺序进行动画。