JQuery.click.animate to move down then back up

Question

So far I have managed to do this so that it moves down with a click in increments of 120, but I want it to go up and down, and not down and down ... I hope I explained this to someone, they’ll understand .

  <script>
  $(document).ready(function() {
    $('#footertab').click(function() {
      $('#footer').animate({
        bottom: '-=120'
      }, 1000, function() {
        // Animation complete.
      });
    });
  });
  </script>

Answer 1

If I get it right, you want to switch the position of the footer. This can be done using the .toggle () function:

$(document).ready(function() {
  $('#footertab').toggle(function() {
    $('#footer').animate({
      bottom: '-=120'
    }, 1000);
  },function() {
    $('#footer').animate({
      bottom: '+=120'
    }, 1000);
  })
});

Answer 2

You can use .toggle()for this:

$(function() { //shortcut for $(document).ready(function() {
  $('#footertab').toggle(function() {
    $('#footer').animate({ bottom: '-=120' }, 1000);
  }, function() {
    $('#footer').animate({ bottom: '+=120' }, 1000);
  });
});

.toggle(), click -= +=. , , , .

Answer 3

Sounds like slideToggle () http://api.jquery.com/slideToggle/ may work for you.

Answer 4

<script>
  $(document).ready(function() {
    $('#footertab').toggle(
      function() {
        $('#footer').animate({
          bottom: '-=120'
        }, 1000, function() {
          // Animation complete.
        });
      },
      function() {
        $('#footer').animate({
          bottom: '+=120'
        }, 1000, function() {
          // Animation complete.
        });
      },
    );
  });
  </script>