0

ボックスがあります。クリックすると、ボックスが最初にアニメーション化されてから、元の位置に戻ります。コード:

$('#test').click(function () {    //#test is the box
        var o ={       //remember the original position
            "x":"0px",
            "y":"0px"           
        }

        $(this).animate({
            "left": "15px",
            "top": "15px"           
        }).queue(function () { //afte execute the animate, return to its origin position
            $(this).css({  
                'left': o.x,
                'top': o.y
            })               
        })
    })

しかし問題は、この効果は 1 回しか実行できず、2 回目にクリックすると実行されないことです。では、なぜこれが起こったのでしょうか? どうすれば問題を解決できますか?

ここに唯一の例があります：

4

2 に答える 2

1

KiroSora09 の答えはおそらくもっと単純ですが、キュー関数を使用する適切な方法は、次のように実行後に関数をキューから削除することです。

$('#test').click(function () {    //#test is the box
    var o ={       //remember the original position
        "x":"0px",
        "y":"0px"           
    }

    $(this).animate({
        "left": "15px",
        "top": "15px"           
    }).queue(function(next) { //after execute the animate, return to its origin position
        $(this).css({  
            'left': o.x,
            'top': o.y
        })               
        next();
    });
})​;

またはこのように：

$('#test').click(function () {    //#test is the box
    var o ={       //remember the original position
        "x":"0px",
        "y":"0px"           
    }

    $(this).animate({
        "left": "15px",
        "top": "15px"           
    }).queue(function() { //after execute the animate, return to its origin position
        $(this).css({  
            'left': o.x,
            'top': o.y
        }).dequeue();
    });
})​;

ここでの動作デモ: http://jsfiddle.net/jfriend00/qM2CJ/

のドキュメント.queue(fn)はこちらです。

于 2012-06-20T08:09:40.187 に答える
1

このデモをお試しください

代わりにコールバックを使用しました。正しく理解できたと思います。

編集：

JavaScriptコードは次のとおりです。

$(function() {
    $('#test').click(function() {
        var o = {
            "x": "0px",
            "y": "0px"
        }

        $(this).animate({
            "left": "15px",
            "top": "15px"
        }, function() {
            $(this).css({
                'left': o.x,
                'top': o.y
            })
        });
    })
})​
于 2012-06-20T06:53:58.087 に答える