jquery.easing的使用

下载地址:http://www.jb51.net/jiaoben/32922.html

基本语法：easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数}

介绍：easing是jquery的一个插件，使用它可以创建更加绚丽的动画效果。

环境：因为easing是jQuery的插件，所以必须是在引入jquery之后再引入它，如下：

?
1
2
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>

使用：

easing是基于animate这个函数,animate的语法:animate(params,speed,easing,fn);

params:一组包含作为动画属性和终值的样式属性和及其值的集合,必须为json格式

speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing：过渡效果名称,默认jquery只提供"linear" 和 "swing",默认过渡效果是"swing"

fn:动画完成时执行的函数

如果在没引入easing的情况下如果想改变元素的left:

html:

?
1
<div style="width:100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div>

jquery代码：

$(function (){
    $(document).click(function (){
        $("div").animate({left: "300px"}, 1000,"linear",function (){
            alert('a');
        });
    });
});

在引入easing之后animate语法：animate(params,easing)

params：一组包含作为动画属性和终值的样式属性和及其值的集合,必须为json格式

easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数}

例子：同样改变left值

html:

<div style="width:100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div>

jquery:

复制代码
$(function (){
    $(document).click(function (){
        $("div").animate({left: "300px"},{
            duration:1000,
            easing:"easeOutBounce",
            complete:function (){
                alert("动画完成");
            }
        });
    });
});
复制代码

完整代码：

复制代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript">
$(function (){
    $(document).click(function (){
        $("div").animate({left: "300px"},{
            duration:1000,
            easing:"easeOutBounce",
            complete:function (){
                alert("动画完成");
            }
        });
    });
});
</script>
</head>
<body>
<div style="width:100px; height:100px; background-color:#ccc; position:absolute; left:20px;"></div>
</body>
</html>
复制代码

 

 

 

 

 

 

 

posted @   唐菜也  阅读(2906)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae