<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#move{
width: 200px;
height: 200px;
background: darkgreen;
position: absolute;
}
</style>
</head>
<body>
<div>
<button id="Button1">点击one</button>
<button id="Button2">点击two</button>
<button id="Button3">点击three</button>
<div id="move">
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js "></script>
<script type="text/javascript">
$(function () {
//向右移动600px
$("#Button1").click(function () {
$("#move").stop().animate({ left: 610 }, 300);
});
//立即往回移动（有stop）
$("#Button2").click(function () {
$("#move").stop().animate({ left: 1000 }, 500);
});
//移动完600px，才会往回移动（没有stop）
$("#Button3").click(function () {
$("#move").stop().animate({ left: 500 }, 500);
});
});
</script>
stop的运用方法
猜你喜欢
转载自blog.csdn.net/weixin_42603150/article/details/81116726
今日推荐
周排行