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>
本文来自博客园，作者：小虾米吖~，转载请注明原文链接：https://www.cnblogs.com/LindaBlog/p/9817123.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」