Question

I am trying to create an effect where on button click, the div would shake left and right and tilt about 10deg each way so it looks like a natural motion when shaking an object with two hands. I am able to create the left and right shaking effect but can’t seem to tie it in with rotation. I also need this to work in IE8, so css3 is not an option. I am using JQuery UI and .rotate() but if there is a better way please let me know. I need this to shake about 3-4 times on button click.

    <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>

Here is what I have so far FIDDLE

Thank you

UPDATE

Here is the updated FIDDLE

Answer 1

jQuery has no method called rotate. This is probably where the problem lies.

Edit

Based on your comments, you could create your own queue I guess…

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

See it in action here: http://jsfiddle.net/UnyYh/1/

You may want to modify the queue code so that it keeps track of one queue per jQuery object. This way if needed you could have shake animations happening on multiple objects at the same time instead of always doing the animations in sequence.