Question

正如你在这里看到的那样：

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

一旦我点击按钮，隐藏的div移动到左侧，但我还需要做的是，当我再次按下按钮时，div必须回到它的原始位置，但我不知道＃39;不知道该怎么做。

我尝试了这个，但它不起作用：

$("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

您可以使用标记

$("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

Answer 2

将状态保存在变量中并使用它来显示或隐藏。

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

使用相同的元素进行2个操作

2 个答案: