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

如果您希望某些内容与屏幕尺寸无关，请计算该尺寸：

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

然后只为这一点制作动画。

{{1}}

检查jQuery's width()方法基础和变体。

Answer 2

为什么你不会获得窗口的宽度并将其存储到某个变量然后使用它

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

就像你之前用过的那样

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

也许这会有所帮助

动画图像离开屏幕，并在图像消失后隐藏它？

2 个答案: