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>

这是我到目前为止FIDDLE

谢谢

更新

以下是更新后的FIDDLE

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

一些倾斜/旋转的JQuery摇动效果

1 个答案: