从右到左再从左到右地使div动画化

Question

如果点击按钮，我想将一个div从其原始位置动画到屏幕左侧。 如果单击另一个按钮，则希望将其动画返回到其原始位置。 我已经能够解决如何从右到左动画显示它，但无法将其动画返回到其原始位置。

var left = $('#coolDiv').offset().left;

$("#b1").click(
  function() {
    $("#coolDiv").css({
      left: left
    }).animate({
      "left": "0px"
    }, "slow");
  }
);

$("#b2").click(
  function() {
    $("#coolDiv").css({
      right: right
    }).animate({
      "right": "0px"
    }, "slow");
  }
);

#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">left</button>
<button id="b2">right</button>

http://jsfiddle.net/XqqtN/5385/

- Black

---

我的建议是将“过渡”相关的内容委托给CSS，将点击逻辑委托给JS。 - Anwar

请检查我的答案和这个 "fiddle"（指代码在线编辑器）。 - Praveen Kumar Purushothaman

Answer 1

将CSS中的left属性设置为窗口宽度减去盒子的宽度。

$("#b1").click(function() {
  // Get the current left of the div
  var left = $('#coolDiv').offset().left;

  $("#coolDiv").css({
    left: left
  }).animate({
    left: 0
  }, "slow");
});

$("#b2").click(function() {
  var left = $(window).width() - $('#coolDiv').width();

  $("#coolDiv").css({
    left: 0
  }).animate({
    left: left
  }, "slow");
});

#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>

---

优化代码：

// Common function to animate Div on both button clicks
function animateDiv(left, right) {
  $('#coolDiv').css({
    left: left
  }).stop(true, true).animate({
    left: right
  }, 'slow');
}

$('#b1').click(function() {
  animateDiv($('#coolDiv').offset().left, 0);
});

$('#b2').click(function() {
  animateDiv(0, $(window).width() - $('#coolDiv').width());
});

#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>

- Tushar

Answer 2

你可以试试像这样简单的东西吗？

$(function () {
  $(".animateable").animate({
    left: $(window).innerWidth() - 50
  }, 1000, function () {
    $(".animateable").animate({
      left: 0
    }, 1000);
  });
});

* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
  Hi
</div>

您可以使用setInterval来使它多次工作。

$(function () {
  setInterval(function () {
    $(".animateable").animate({
      left: $(window).innerWidth() - 50
    }, 1000, function () {
      $(".animateable").animate({
        left: 0
      }, 1000);
    });
  }, 2000);
});

* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
  Hi
</div>

- Praveen Kumar Purushothaman

Answer 3

这是您更新后的代码。请按照以下方式进行更改：

$("#b1").click(
  function() {
    $("#coolDiv").animate({
        "left": "0px"
      },
      "slow"
    );
    $("#coolDiv").css('right', '');
  }
);

$("#b2").click(
  function() {

    $("#coolDiv").animate({
        "right": "0px"
      },
      "slow"
    );
    $("#coolDiv").css('left', '');
  }
);

#coolDiv {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  background: yellow;
}
#b1 {
  margin-top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">B1</button>
<button id="b2">B2</button>

希望它有所帮助。

- ketan

---

@EdwardBlack 注意，此答案不会使Div动画化，也请尝试多次单击按钮。 - Tushar

但是 div 在移动，不是吗？ - Black