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>

これが私がこれまでに持っているものです

ありがとうございました

アップデート

ここに更新されたフィドルがあります

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/UniYh/1/

jQuery オブジェクトごとに 1 つのキューを追跡するように、キュー コードを変更することができます。このようにして、必要に応じて、常にアニメーションを順番に実行するのではなく、複数のオブジェクトで同時にシェイク アニメーションを発生させることができます。

于 2012-11-30T18:19:42.013 に答える