一个很有趣的jQuery动画应用实例

最新推荐文章于 2024-04-24 15:18:04 发布

jiangsq12345

最新推荐文章于 2024-04-24 15:18:04 发布

阅读量332

点赞数

分类专栏：网页前端文章标签： jquery function 测试工具浏览器

本文链接：https://blog.csdn.net/jiangsq12345/article/details/8026559

版权

网页前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

下载jquery.js到指定文件夹，然后浏览器打开该网页，会看到动画效果
也可以直接到W3School的在线测试工具上，输入查看效果 http://www.w3school.com.cn/tiy/t.asp?f=jquery_animation

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#start").click(function(){
   f0();
  });
});
function f0(){
 $("#box").animate({height:300},"slow");
 $("#box").animate({width:300},"slow");
 $("#box").animate({height:100},"slow");
 $("#box").animate({width:100},"slow");
 f0();
}
</script> 
</head>
 
<body>

<p><a href="#" id="start">Start Animation</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
 
</body>
</html>

这个是效果截图：

jiangsq12345

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个很有趣的jQuery动画应用实例

下载jquery.js到指定文件夹，然后浏览器打开该网页，会看到动画效果也可以直接到W3School的在线测试工具上，输入查看效果 http://www.w3school.com.cn/tiy/t.asp?f=jquery_animation $(document).ready(function(){ $("#start").click(function(){ f0();
复制链接

扫一扫