-1

I need the code to make the function that I already have work both ways:

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

So, what I have is explained on the image below. The .rightslide moves to the position of .leftslide, leaving .leftslide partially visible. Now, everything works fine, but I need the #scroll to move the .rightslide back to it's initial position when it's clicked for the second time (when .rightslide is at 9% already).

enter image description here

I hope everything is understandable. If not, imagine, if you will, a button that opens the door, and once it is open, the same button can be pressed to close it.

Kris Rimar
  • 195
  • 2
  • 12

1 Answers1

4

You can easily solve that with the toggle method, but as that overload is deprecated in jQuery 1.8 and removed in jQuery 1.9, you can use a variable to make the toggle instead.

(I don't know if I got the animations right for the slide back, but you get the principle.)

$(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;
  });

});
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • 2
    @Itay: You are correct. It was that overload that I was trying to refer to. I clarified it in the answer. – Guffa Sep 07 '13 at 17:54
  • Thank you! :) Works fine, yeah, only need to change the percentage of the animation – Kris Rimar Sep 07 '13 at 17:56
  • One more thing: how to rotate the background of the #scroll 180*? – Kris Rimar Sep 07 '13 at 18:00
  • 1
    @KrisRimar: This may be helpful for that: http://stackoverflow.com/questions/5087420/how-to-rotate-the-background-image-in-the-container – Guffa Sep 07 '13 at 19:30