随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

animate方法使用总结

<!DOCTYPE html>
<html lang="en" class="loading">
<head>
<meta charset="UTF-8">
<title>animate方法</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(function(){
/* show()方法和hide()方法会同时修改元素的多个样式属性,即高度、宽度和不透明度:
fadcOut()方法和fadeln()方法只会修改元素的不透明度:
slideDown()方法和slideUp()方法只会改变元素的高度.
animate方法的标准格式:要使用此方式的前提是被操作的元素必须有position属性,否则没效果
animate(params, speed,callback);
*/
$(".panel").click(function(){
//点击元素后在1秒内移动300px的同时元素高度增加到200px,不刷新页面的情况下再次点击元素不会再移动
$(this).animate({left:"300px",height:"200px"},1000);
//不刷新页面的前提下,再次点击元素时在上一次位置的基础上向右移动300px,不是向左
//$(this).animate({left:"+=300px"},1000);
});
});
</script>
</head>
<body>
<div class="panel" style="width: 100px; height: 100px;margin: 100px; background: #647787; position: relative;" ></div>
</body>
</html>
posted on   小虾米吖~  阅读(941)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示