使用jQuery的图像飞离屏幕

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

这是我到目前为止所做的，但我希望它只运行一次，而不是在循环中运行：

var-speedX=20；
var=1；
setInterval（函数（）{
var newLeft=$（“img#bee”）.position（）.left+speedX+“px”；
var newTop=$（“img#bee”）.position（）.top+speedY+“px”；
$（“img#bee”）.css({
左：新左，
顶部：纽托普
});
if（$（（“img#bee”）.position（）.left>$（window.width（））{
$（“img#bee”）.css({
左：“0px”
});
}
if（$（“img#bee”）.position（）.left<0）{
$（“img#bee”）.css({
左：$（窗口）.width（）+“px”
});
}
if（$（（“img#bee”）.position（）.top>$（window.height（））{
$（“img#bee”）.css({
顶部：$（窗口）.height（）+“px”
});
}
$（“.stop btn”）。单击（函数（）{
$（“img#bee”）.stop（）；
});
}, 20);
#bee{显示：内联块；位置：绝对}

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


var-speedX=20；
var=1；
setInterval（函数（）{
var newLeft=$（“img#bee”）.position（）.left+speedX+“px”；
var newTop=$（“img#bee”）.position（）.top+speedY+“px”；
$（“img#bee”）.css({
左：新左，
顶部：纽托普
});
if（$（“img#bee”）.position（）.left<0）{
$（“img#bee”）.css({
左：$（窗口）.width（）+“px”
});
}
if（$（（“img#bee”）.position（）.top>$（window.height（））{
$（“img#bee”）.css({
顶部：$（窗口）.height（）+“px”
});
}
$（“.stop btn”）。单击（函数（）{
$（“img#bee”）.stop（）；
});
}, 20);
#bee{显示：内联块；位置：绝对}
这可能不是最好的解决方案，但会奏效。只需在CSS中添加一个转换，然后使用javascript/jquery更改CSS

Javascript:

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

HTML

你能分享你正在做的代码片段吗？帮助你好多了。谢谢编辑了，对不起！我给你做了一个你应该从开始做的片段检查左边>=（window.width img.width）虽然这可能会回答这个问题，但你应该始终解释你做了什么以及为什么它解决了OP的问题编辑我的答案来解释我做了什么以及为什么。
<div id="elementID">Div content</div>

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