动画一个图像离开屏幕，并隐藏它的时候，它走了？

Question

$('.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，这看起来真的很低效。

Answer 1

如果您想要不依赖于屏幕大小的屏幕而离开屏幕，请计算该大小：

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

检查jQuery的宽度()方法基础和变体。

Answer 2

你为什么不把窗口的宽度存储在某个变量中然后使用它呢？

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

就像你以前用过的

 function coinLeft() {
      $(".spinning-coin-image").animate({left: window_width*(-1)+"px"}, 5000, "swing", coinRight);
   }

也许这会有帮助