使用 jQuery 的图像飞离屏幕

Question

我试图让图像飞过屏幕一次然后停止。我可以让它循环运行，但它会分散注意力，所以我只希望它运行一次。有谁知道怎么做？ （我必须使用 jQuery）

这是我目前所拥有的，但我希望它只运行一次，而不是循环：

var speedX = 20;
var speedY = 1;

setInterval(function() {
  var newLeft = $("img#bee").position().left + speedX + "px";
  var newTop = $("img#bee").position().top + speedY + "px";

  $("img#bee").css({
    left: newLeft,
    top: newTop
  });
  if ($("img#bee").position().left > $(window).width()) {
    $("img#bee").css({
      left: "0px"
    });
  }

  if ($("img#bee").position().left < 0) {
    $("img#bee").css({
      left: $(window).width() + "px"
    });
  }

  if ($("img#bee").position().top > $(window).height()) {
    $("img#bee").css({
      top: $(window).height() + "px"
    });
  }
  $(".stop-btn").click(function() {
    $("img#bee").stop();
  });

}, 20);

#bee { display:inline-block; position:absolute }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="bee"  src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco/v1417678932/jgbmipdnqptqxbig3ywz.jpg" />

Answer 1

这可能不是最好的解决方案，但它会起作用。只需在 CSS 中为其添加一个过渡，然后使用 javascript/jquery 更改 css

Javascript：

 $(".nameOfElement").click(function() {
    $("#elementID").css({'right' : '0px'});
 });

HTML

<div id="elementID">Div content</div>

CSS

#elementID {
  position: absolute;
  left: 0px;
  transition: right 1500ms; //time to take to fly accros the screen
}

Answer 2

删除此if ($("img#bee").position().left > $(window).width()) 条件可确保图像位置一旦超过屏幕宽度不应设置回0px，从而避免循环。

var speedX = 20;
var speedY = 1;

setInterval(function() {
  var newLeft = $("img#bee").position().left + speedX + "px";
  var newTop = $("img#bee").position().top + speedY + "px";

  $("img#bee").css({
    left: newLeft,
    top: newTop
  });
 

  if ($("img#bee").position().left < 0) {
    $("img#bee").css({
      left: $(window).width() + "px"
    });
  }

  if ($("img#bee").position().top > $(window).height()) {
    $("img#bee").css({
      top: $(window).height() + "px"
    });
  }
  $(".stop-btn").click(function() {
    $("img#bee").stop();
  });

}, 20);

#bee { display:inline-block; position:absolute }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="bee"  src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco/v1417678932/jgbmipdnqptqxbig3ywz.jpg" />