animate动画示例(泪奔的小孩)及stop和delay的使用

2019/6/29 22:44:31

编程Tag： animate stop delay

本文主要是介绍animate动画示例(泪奔的小孩)及stop和delay的使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 
<head> 
<title></title> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
img 
{ 
width:150px; 
height:200px; 
position:relative; 
} 
td{width:150px;height:200px;} 
table{border:solid 1px black;} 
</style> 
<script type="text/javascript"> 
$(function () { 
$('img').click(function () { 
$(this).animate({ left: '+=150px' }, 2000).animate({ left: '+=150px' }, 2000).animate({ top: '+=200px' }, 2000).animate({ left: '-=150px' }, 2000).animate({ left: '-=150px' }, 2000).animate({ top: '+=200px' }, 2000).animate({ left: '+=150px' }, 2000).animate({ left: '+=150px' }, 2000); 
}) 
//停止动画，当一个元素有一个动画队列时，停止的是当前动画，紧接着执行下一个动画 
$('#btnStop').click(function () { 
$('img').stop(); 
}) 
$('#btnYanChi').click(function () { 
$('img').delay(2000).hide(2000); 
}) 
}) 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<img src="images/泪奔1.gif" /> 
</td> 
<td> 
  
</td> 
<td> 
  
</td> 
</tr> 
<tr> 
<td> 
  
</td> 
<td> 
  
</td> 
<td> 
  
</td> 
</tr> 
<tr> 
<td> 
  
</td> 
<td> 
  
</td> 
<td> 
  
</td> 
</tr> 
</table> 
<input id="btnStop" type="button" value="stop" /> 
<input id="btnYanChi" type="button" value="延迟执行" /> 
</body> 

这篇关于animate动画示例(泪奔的小孩)及stop和delay的使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

animate动画示例(泪奔的小孩)及stop和delay的使用

相关编程文章