javascript - 双向工作的函数 JavaScript jQuery

Question

我需要代码来使我已经拥有的功能双向工作：

$(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 部分可见。现在，一切正常，但我需要在第二次单击时#scroll将其移.rightslide回初始位置（此时.rightslide已为 9%）。

我希望一切都可以理解。如果没有，想象一下，如果你愿意，一个按钮可以打开门，一旦它打开，可以按下同一个按钮来关闭它。

Answer 1

您可以使用togglemethod轻松解决该问题，但是由于 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;
  });

});