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>

这是我到目前为止所拥有的小提琴

谢谢

更新

这是更新的小提琴

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 对象的一个队列。这样，如果需要，您可以同时在多个对象上发生抖动动画，而不是总是按顺序执行动画。