如何在jQuery中动画绝对位置从右到左再从左到右？

Question

我正在尝试做一个简单的游戏，在游戏中，当go按钮被点击时，一条船从一个海岸驶向另一个海岸。我尝试使用jQueryanimate，但它没有像预期的那样工作。

哈巴狗

body
  button.go GO
  .main 
    .left 
      .seaShore
    .travel 
      .boat
      .river 
    .right 
      .seaShore

萨斯

*
    margin: 0
    padding: 0
    box-sizing: border-box

@mixin flex($justify,$align)
    display: flex
    justify-content: $justify
    align-items: $align

.go
    padding: 5px 10px
    position: fixed
    top: 20px
    right: 50%
    transform: translateX(50%)

.main
    height: 100vh
    @include flex(center,flex-end)

.seaShore
    background-color: green
    width: 25vw
    height: 300px

.travel
    position: relative
    .boat
      position: absolute
      top: -15px
      right: 0
      width: 200px
      height: 40px
      border-radius: 0 0 50% 50%
      background-color: brown

    .river
        width: 50vw
        height: 290px
        background-color: #00bfff

jQuery

$(document).ready(function () {
  let right = false;
  let offset = $('.boat').offset();
  $(".go").click(function () {
    !right
      ? $(".boat").animate(
          {
            left: "0",
            right: offset.left - 200
          },
          "veryfast"
        )
      : $(".boat").animate(
          {
            left: offset.left - 100,
            right: 0
          },
          "veryfast"
        );

    right = !right;
  });
});

问题是当船回到起始位置时，它会比原来的位置走得更远。

有谁能帮帮我吗？

代码笔链接

Answer 1

你在寻找一个动态的解决方案吗？如果不是，那么您可以修改值以减去

例如改变

left: offset.left - 100,

成为

left: offset.left - 382,

你可以用382这个数字来确保它很合适