0

さて、クラス .iconeffect にそれぞれ異なる id (#effect1,2,3) を持つ 3 つの画像を含むテーブルがあり、それらを onclick でアニメーション化しようとしています。これは私が持っている現在のコードですが、2 番目のアニメーションに問題があります。

$('#effect1').click(function() {
    $(this).finish();
    $(this).animate({ right: 200 });
    $('#effect2, #effect3').animate({ left: 1000 });
});

このコードは、#effect1 を 1 つの方法でアニメートし、他の 2 つのエフェクトを反対の方法 (画面外) でアニメートする必要があります。最初のエフェクトはアニメートしますが、2 番目と 3 番目のエフェクトはアニメートしません。それらの上にホバリングした後、それらは終了位置に移動します。最初のものをクリックする前にそれらの上にカーソルを置くと、それらは通常どおりアニメーション化されます。

編集：JSFIDDLE http://jsfiddle.net/9EqNy/24/

4

2 に答える 2

0

同時に実行されるアニメーションのキューを無効にする必要があります。

$('#effect1').click(function() {
    $(this).finish();
    $(this).animate({ right: 200, queue : false });
    $('#effect2, #effect3').animate({ left: 1000, queue : false });
});

jQuery API ドキュメントから:

キュー ( default: true)

型: Boolean または String アニメーションをエフェクト キューに配置するかどうかを示すブール値。false の場合、アニメーションはすぐに開始されます。

[編集]これを試してください：

$('#effect1').click(function() {
    $(this).finish();
    var self = this;
    setTimeout(function(){
        $(self).animate({ right: 200, queue : false })
    },1);
    setTimeout(function(){
        $('#effect2, #effect3').animate({ left: 1000, queue : false });
    },1);
});
于 2013-09-13T11:38:16.453 に答える
0

3 つの DIV の CSS に position:relative を追加するだけです。

#effect1 {
    width:100px;
    height:100px;
    background-color:red;
    position:relative;
}

フィドル: http://jsfiddle.net/wchXQ/

于 2013-09-13T12:04:14.540 に答える