-1

すでに持っている関数を両方の方法で機能させるには、コードが必要です。

$(document).ready(function() {
$('#scroll').click(function() {
    $('#scroll').animate({left: '2%'});
    $('.leftslide').animate({left: '-84%'});
    $('.rightslide').animate({left: '9%'});
    $('#scroll').animate({rotate: '180' });
});
});

だから、私が持っているものは下の画像で説明されています。がの.rightslide位置に移動し、.leftslide.leftslide が部分的に表示されたままになります。これで、すべて正常に動作しますが、2 回目にクリックしたときに (すでに 9% になっている場合) 、元の位置#scrollに.rightslide戻す必要があります。.rightslide

ここに画像の説明を入力

すべてが理解できることを願っています。そうでない場合は、ドアを開けるボタンを想像してみてください。ドアが開いたら、同じボタンを押してドアを閉じることができます。

4

1 に答える 1

4

toggleメソッドで簡単に解決できますが、そのオーバーロードは jQuery 1.8 で廃止され、jQuery 1.9 で削除されたため、代わりに変数を使用して切り替えを行うことができます。

（スライドバックのアニメーションが適切かどうかはわかりませんが、原則はわかります。）

$(document).ready(function() {

  var slideLeft = true;

  $('#scroll').click(function() {
    if (slideLeft) {
      $('#scroll').animate({left: '2%'});
      $('.leftslide').animate({left: '-84%'});
      $('.rightslide').animate({left: '9%'});
      $('#scroll').animate({rotate: '180' });
    } else {
      $('#scroll').animate({left: '98%'});
      $('.leftslide').animate({left: '+84%'});
      $('.rightslide').animate({left: '91%'});
      $('#scroll').animate({rotate: '0' });
    }
    slideLeft = !slideLeft;
  });

});
于 2013-09-07T17:47:56.887 に答える