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

Question

我正在尝试制作一个简单的游戏，在该游戏中，单击 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

Answer 1

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

例如更改

left: offset.left - 100,

成为

left: offset.left - 382,

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

Answer 2

而不是使用 $('.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;
    });
});

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

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

html

javascript

css

jquery

pug