javascript - 对图片进行动画处理使其离开屏幕，并在消失后隐藏它？

$('.container').append('<img class="spinning-coin-image" src="img/coin-spinning-transparent.gif" style="position:absolute; top:50px">');

   function coinLeft() {
      $(".spinning-coin-image").animate({left: "-=5100"}, 5000, "swing", coinRight);
   }
   function coinRight() {
      $(".spinning-coin-image").animate({left: "+=5000"}, 5000, "swing", coinLeft);
   }

   coinRight();

我正在尝试寻找一种方法来拍摄我的图像coin-spinning-transparent.gif并对其进行动画处理，以使其从屏幕飞出，然后重新出现。
我发现的问题是，1，如果您有超过5000个水平像素，它实际上不会显示在屏幕外； 2，这似乎效率很低。

最佳答案

如果您希望屏幕上的某些东西独立于屏幕大小，请计算该大小：

var out_width =  $(window).width();

然后将任何东西设置为动画。

function coinLeft() {
      $(".spinning-coin-image").animate({left: out_width}, 5000, "swing", coinRight);
   }
   function coinRight() {
      $(".spinning-coin-image").animate({left: 0}, 5000, "swing", coinLeft);
   }

检查方法的基础知识和变体。