1

我正在尝试创建一种效果，在单击按钮时，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

4

1 回答 1

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

于 2012-11-30T18:19:42.013 回答