我正在使用.animate()通过步进函数在两个值之间进行动画处理。由于没有选择器，我无法使用.stop()
$({ Value: 50 }).animate({ Value: 0 }, {
duration: 1000,
step: function (val) {
$('#SomeElement').css({
transform: "translateY(" + val + "px)"
});
}
});
启动此动画后如何停止
？看起来，我可以找到与选择器一起使用的方法(请参阅下面的片段(。
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<style type="text/css">
div {
top: 100;
left: 0;
width: 10px;
height: 10px;
background-color: #000;
}
</style>
</head>
<body>
<div id="SomeElement"></div>
<button>stop</button>
<script>
$('#SomeElement').animate({ top: 100 }, {
duration: 2000,
step: function (val) {
$('#SomeElement').css({
transform: "translateY(" + val + "px)"
});
}
});
$('button').click(function () {
$('#SomeElement').stop();
});
</script>
</body>
</html>