jquery动画效果

1.基本效果
show([s,[e],[fn]]) 显示
hide([s,[e],[fn]]) 隐藏
toggle([s],[e],[fn]) 显示隐藏切换
不带参数直接显示隐藏
带参数 speed easing fn
不建议带speed easing
fn 指动画完成之后
2.滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
3.淡入淡出
fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],o,[e],[fn]]) 透明度的动画
fadeToggle([s,[e],[fn]])
4自定义
animate(p,[s],[e],[fn])1.8 params 属性 speed easing fn
stop([c],[j])1.7 停止当前正在执行的动画
delay(d,[q]) 延迟后续动画的执行
finish([queue])1.9+
<body>

成都创新互联是专业的丰林网站建设公司，丰林接单;提供成都网站制作、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行丰林网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

<button class="btns">start</button>
<button class="btnp">stop</button>
<button class="btnf">finish</button>
<ul>
    <li><span>mousedown([[data],fn])</span></li>
    <li><span>mouseenter([[data],fn])</span></li>
    <li><span>mouseleave([[data],fn])</span></li>
    <li><span>mousemove([[data],fn])</span></li>
</ul>

    $(function () {
        //声明变量控制奇偶
        var count = 0;
        $(".btns").click(function () {
            addanimate();
        });
        function addanimate() {
            $("li").each(function (index) {
                var delaytime = index * 100;
                $(this).delay(delaytime).animate({
                    width: count % 2 == 0 ? 200 : 100
                }, 1000);
            }).last().queue(function () {
                //当前最后一个元素动画的队列执行完成之后执行的回调函数
                count++;
                $(this).dequeue();//删除当前元素最前端的队列函数
                addanimate();
            });
        }

        $(".btnp").click(function () {
            $("li").stop();
        });
        $(".btnf").click(function () {
            $("li").finish();
        });
    });

分享题目：jquery动画效果
文章位置：https://www.cdcxhl.com/article14/gipjde.html

成都网站建设公司_创新互联，为您提供App设计、品牌网站制作、移动网站建设、外贸网站建设、商城网站、定制网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容