<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自定义动画</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<style>
* {
margin: 0;
}
</style>
<script type="text/javascript">
var moveToLeft = function () {
$("#topImg").animate({"left": "0"}, "slow", moveToRight);
};
var moveToRight = function () {
$("#topImg").animate({"left": "100px"}, "slow", moveToLeft);
};
$(function () {
$("button").click(moveToRight);
});
</script>
</head>
<body>
<button>点击我右移100px</button>
<br/><br/><br/><br/>
<img id="topImg" style="position: absolute; left: 0" src="https://yue06.sogoucdn.com/cdn/web/image/2021/10/26/20211026171342_5842.jpg"/>
</body>
</html>