4

div を右にスライドさせ、クリックすると左に戻そうとしています。私は現在このコードを持っていますが、右にスライドし、2 回目のクリックなしですぐに左にスライドします。トグルも実装しようとしましたが、スクリプトが壊れてしまいました。私はとても近くに感じますが、それを釘付けにすることはできません。

$(function(){
    $("#click").click(function(){
        $("#click").animate({left:'+=100px'}, 'fast');
    });

    $("#click").click(function() {
        $("#click").animate({left:'0'}, 'fast');
    });
});
4

4 に答える 4

7

jsBin デモ

var c=0;
$("#click").click(function(){
    $(this).stop().animate({left: ++c%2*100 }, 'fast');
});

このソリューションの背後にある計算を説明するには:
クリックするたびにvar cが事前にインクリメントされるため、基本的に 10 回のクリック後はmoduluscが== 10使用されます。クリックし続けると、計算は 11%2 12%2 13%2 14%2になります。 .. 1 に 100 = 100 (必要な 100px) を掛けると、すべての偶数 (0*100) は 0px になります! 10%2 = 0
=1
=0
=1
=0

またはこのように：

var dir = 0;
$("#click").click(function(){
     dir = dir===0 ? 100 : 0;
     $(this).stop().animate({left: dir }, 'fast');
});
于 2012-09-05T18:02:16.490 に答える
0

これは、最初のイベントによると、Div が実際には 100px だけ右に移動するためです。しかし、2 つのクリック イベントを正しく定義しました。そのため、イベントはクリックごとに 2 回呼び出されます。

したがって、最初の関数に合わせて div が 100px 移動すると、すぐに 2 番目の関数が起動され、元に戻ります。

これは、アラートを配置することで確認できます。1 回のクリックでも 2 つのアラートを表示できます。

于 2012-09-05T18:02:49.393 に答える
0

div が現在どこにあるかを (leftオフセット値または変数によって) 決定し、それに応じて右方向に移動する必要があります (左の場合は右に移動し、その逆も同様です)。したがって、基本的には、シングル クリック関数内の if 句がこれを処理します。

于 2012-09-05T18:03:02.247 に答える
0

.queue と .dequeue を使用して 2 つの効果をキューに入れるのが最善かもしれません

ここでいくつかの例と仕様を見ることができます: http://api.jquery.com/queue/

于 2012-09-05T18:25:38.047 に答える