<html>
<head>
<style type="text/css">
#dan1{
height: 100px;width: 100px;position: relative;left: 0px;top:0px;
}
#qiang1{
height: 100px;width: 20px;position: relative;left: 1000px;top:0px;
}
</style>
<!--引入jquery文件 -->
<script src="jquery.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("#dan1").animate({'left':'1000px'},5000,'linear')
})
$("#btn2").click(function(){
//让停止元素身上正在执行的操作，留在当前状态
$("#dan1").stop();
})
$("#btn3").click(function(){
//让停止元素身上正在执行的操作，将元素的状态变为运动最终指定状态
$("#dan1").finish();
})
})
</script>
</head>
<body>
<input type="button" id="btn1" value="开始">
<input type="button" id="btn2" value="停止">
<input type="button" id="btn3" value="结束">
</br></br>
<img src="dog.jpg" id="dan1" style="left:0px;">
<img src="qiang.jpg" id="qiang1" >
</body>
</html> <html>
<head>
<style type="text/css">
#dan1
阅读背景：
原 小白的jquery学习之路04效果 stop finish
来源：互联网
分享到：
