如何在 jQuery 中从右到左然后从左到右设置绝对位置动画?

How to animate position absolute from right to left and then left to right in jQuery?

我正在尝试制作一个简单的游戏,在该游戏中,单击 GO 按钮时,一艘船会从一个海岸驶向另一个海岸。我尝试使用 jQuery animate 但它没有按预期工作。

哈巴狗

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

Sass

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

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

谁能帮帮我?

CODE PEN LINK

您在寻找动态解决方案吗?如果不是,那么您可以修改该值以减去

例如更改

left: offset.left - 100,

成为

left: offset.left - 382,

你可以随便玩玩数字 -382 以确保它很合适

而不是使用 $('.boat').offset() 使用 document.querySelector('.boat').offsetLeft 它会解决你的问题,而且它也是动态的。

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