1

次のコードを使用して、設定された回数前後に回転する div 要素があります。

プラグイン: 

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>

コード：

$(document).ready(function(){
var rotation = function (times) {
var el = $("#pencil");
if(typeof times == 'number'){
    el.data('repeatRotation',times);
} else {
    times = el.data('repeatRotation')-1;
    el.data('repeatRotation',times);
}
if(times > 0){
    $("#pencil").rotate({
        angle: 0,
        animateTo: 2,
        duration: 200,
        callback: rotationBack
    });
}
}
var rotationBack = function () {
$("#pencil").rotate({
    angle: 0,
    animateTo: -2,
    duration: 200,
    callback: rotation
});
}
rotation(10);
});

私が実際に望んでいるのは、5 秒の遅延後に div 要素が回転を開始することです。以下に示すように、通常の .delay(5000) を上記のコードに追加しようとしましたが、違いはないようです。ページが読み込まれた直後にコードが実行されます。

if(times > 0){
    $("#pencil").delay(5000).rotate({
        angle: 0,
        animateTo: 2,
        duration: 200,
        callback: rotationBack
    });

この場合、 .delay(5000) が機能しない理由を知っている人はいますか?

4

2 に答える 2

1

.delay()キュー内のオブジェクトに対してのみ機能します。そのプラグインで機能しない場合は、アニメーションが jQuery キューに追加されるような方法で実装されていないことを意味します。この機能を追加するのは簡単setTimeoutですが、

if (times > 0) {
    setTimeout(function () {
        $("#pencil").rotate({
            angle: 0,
            animateTo: 2,
            duration: 200,
            callback: rotationBack
        });
    }, 5000);

最初のローテーションだけに遅延を追加するには、コードを次から変更します

rotation(10);

に

setTimeout(function(){
    rotation(10);
},5000);
于 2013-09-08T13:13:05.010 に答える
1

うまくいかない理由delayは、最初はアニメーション キューに遅延するものが何もないためです。

.rotateこれを修正するには、通話をキューに入れる必要があります。

$('#pencil').delay(4000).queue(function(){

  $(this).rotate({
    angle: 0,
    animateTo: 2,
    duration: 200,
    callback: rotationBack
  });

});

例を見てくださいthis jsbin。

また、この質問How to delay jquery animationも見てください。

于 2013-09-08T13:18:11.000 に答える