jquery.easing.js的使用

jquery.easing.js是个好东西,各种动画效果扩展,加强和丰富了jquery自带的各种动画函数

box点击就会像移动出弹簧效果,$(obj).animate(目前状态,时间,效果,回调函数)

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        body {
            position:relative;
            width:100%;
            height:100px;
        }
        #box {
            position:absolute;
            width:100px;
            height:100px;
            background-color:red;
            top:0px;
            left:0px;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/js/jquery.easing.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#box").click(function () {
                $(this).stop(true, true).animate({
                    left:'400px'
                },
                2000, 'easeInOutElastic',
                function () {
                    $(this).animate({
                        left: '0px'
                    }, 2000, 'easeInOutElastic');
                });
            });
        });
    </script>
</body>
</html>
复制代码

还支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果函数

各种动画效果如下,自己去试

jswing
easeInQuad easeOutQuad easeInOutQuad
easeInCubic easeOutCubic easeInOutCubic
easeInQuart easeOutQuart easeInOutQuart
easeInQuint easeOutQuint easeInOutQuint
easeInSine easeOutSine easeInOutSine
easeInExpo easeOutExpo easeInOutExpo
easeInCirc easeOutCirc easeInOutCirc
easeInElastic easeOutElastic easeInOutElastic
easeInBack easeOutBack easeInOutBack
easeInBounce easeOutBounce easeInOutBounce

posted @   Fast Mover  阅读(1730)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
友情链接: A4纸尺寸 | 卡通头像 | +申请友情链接
点击右上角即可分享
微信分享提示