兼具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％时）。< / p>

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

Answer 1

你可以使用toggle method轻松解决这个问题，但是由于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;
  });

});