Javascript JQuery震动效果与一些倾斜/旋转

我试图创造一种效果，在点击按钮时，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>

var时间=4；
var回路=设定间隔（rota，300）；
函数rota（）{
时代--；
if（times==0）{clearInterval（loop）；}
$（“.globe main”）.rotate（{animateTo:10，持续时间：500，}）；
//$（“.globe main”）.effect（“震动”{次：3，距离：30}，800）；
}
罗塔（）；

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

多谢各位

更新

---

下面是更新后的

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

请在此处查看它的实际操作：

---

您可能希望修改队列代码，以便它跟踪每个jQuery对象的一个队列。如果需要，可以通过这种方式在多个对象上同时进行抖动动画，而不是总是按顺序进行动画。

jQuery没有称为

旋转的方法。这可能就是问题所在

编辑

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

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

请在此处查看它的实际操作：

您可能希望修改队列代码，以便它跟踪每个jQuery对象的一个队列。这样，如果需要，您可以在多个对象上同时进行抖动动画，而不是总是按顺序进行动画。
@markopfc因此，请包含该插件以便小提琴工作，您可以在“添加资源”侧栏项中进行此操作。谢谢您的提示，这是我在@markopfc上的更新版本，看起来他们还没有在safari上测试过这个插件。你用的是什么浏览器？我用的是FF，但我需要它左右摇摆和倾斜3-4次，我可以得到动画，但我希望它的动画从0到-10到10大约3-4times@markopfc我懂了。问题是，无论是谁构建了这个插件，都是按照与其他jQuery动画相同的标准创建的。基本上，动画不会排队。如果您在代码中连续制作了三个动画，插件将直接跳到最后一个，而不是排队并按顺序执行。如果它有回调参数之类的东西，您可以自己将它们串在一起，但它也没有。您可能想寻找一个更好的插件。@markopfc因此包含该插件，以便该插件可以工作，您可以在“添加资源”侧栏项目中进行操作。感谢您提供的提示，这里是更新的fiddle，我有@markopfc，看起来他们没有在safari上测试该插件。你用的是什么浏览器？我用的是FF，但我需要它左右摇摆和倾斜3-4次，我可以得到动画，但我希望它的动画从0到-10到10大约3-4times@markopfc我懂了。问题是，无论是谁构建了这个插件，都是按照与其他jQuery动画相同的标准创建的。基本上，动画不会排队。如果您在代码中连续制作了三个动画，插件将直接跳到最后一个，而不是排队并按顺序执行。如果它有回调参数之类的东西，您可以自己将它们串在一起，但它也没有。您可能需要寻找更好的插件。