Сделайте 2 действия с одним и тем же элементом

Question

Как вы можете видеть здесь:

http://jsbin.com/maxov/1/watch?html,css,js,output

Как только я нажимаю кнопку, скрытый div перемещается влево, но мне также нужно сделать следующее: когда я снова нажимаю кнопку, div должен вернуться в исходное положение, но я не знаю, как это сделать.,

Я попробовал это, но это не работает:

$("button").click(function(){
    $(".div").animate({
       left: "0px"

   }, 300);
    $("body").animate({
       left:"150px"
    }, 300);
});

ниже не работает

$("button").click(function(){
   $(".div").animate ( {
       left: "-150px"
   }, 300);
    $("body").animate({
       left:"0px"
    }, 300)
});

Спасибо за прочтение.

Answer 1

Сохраните состояние в переменной и используйте его, чтобы показать или скрыть.

var visible = false;

$("button").click(function() {
  if (visible) {
   $(".div").animate({
       left: "-150px"

   }, 300);
   $("body").animate({
       left:"0px"
   }, 300)
  } else {
    $(".div").animate({
       left: "0px"
   }, 300);
   $("body").animate({
       left:"150px"
   }, 300);
  }

  visible = !visible;
});

Answer 2

Вы можете использовать флаг

$("button").on('click', function () {
    var flag = $(this).data('flag');

    $(".div").animate({
        left: flag ? "-150px" : "0px"
    }, 300);

    $("body").animate({
        left: flag ? "0px" : "150px"
    }, 300);

    $(this).data('flag', !flag)
});

FIDDLE