jQuery动画---自定义动画animate()

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/73511662 同步动画animate(参数对象,time,回调函数)同时改变多个样式。
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/73511662

同步动画

animate(参数对象,time,回调函数)

同时改变多个样式。

$(":button").click(function(){
    $("div").animate({
        'width':"300px",
        'height':"300px",
        'opacity':0.5,
        'font-size':'50px'
    });
});

添加速度和回调函数

$(":button").click(function(){
    $("div").animate({
        'width':"300px",
        'height':"300px",
        'opacity':0.5,
        'font-size':'50px'
    },200,function(){
        alert("动画完成");
    });
});

移动动画。需要将div的样式设置成position:absolte,然后在改变left和top的值即可:

$(":button").click(function(){
    $("div").animate({
            left:'100px',
            top:'100px'
    });
});

位置的自增自减。位置的改变可以自增自减(+=,-=)

$(":button").click(function(){
    $("div").animate({
            left:'+=100px',
            top:'-=100px'
    });
});

运动模式

有两种速度
- swing 缓动(先快后慢)
- linear 匀速

$(".a").animate({
    left:"500px"
},2000,'swing');
$(".b").animate({
    left:"500px"
},2000,'linear');

列队动画

回调函数

嵌套调用回调函数,可以实现队列动画,但是比较繁琐

$(":input").click(function(){
    $("div").animate({width:"300px"},function(){
        $("div").animate({height:"300px"},function(){
            $("div").animate({height:"300px"},function(){
                $("div").animate({fontSize:"50px"});
            })
        });
    });     
});

连缀或顺序排列

链式调用

jQuery支持链式调用。因此可以链式的改变多个样式

$(":input").click(function(){
    $("div").animate({width:"300px"})
            .animate({height:"300px"})
            .animate({fontSize:"50px"});
});

顺序排列

将动画分解,并列的依次调用

$(":input").click(function(){
    $("div").animate({width:"300px"});
    $("div").animate({height:"300px"});
    $("div").animate({fontSize:"50px"});
});

PS

以上方法对于单个元素的样式可以实现列队动画。但是如果同时控制几个元素时,不同的元素同时开始执行。但是执行时是按照队列依次执行自身的动画,如果需要不同的元素之间队列执行,就必须嵌套回调函数

$(":input").click(function(){
    $(".a").animate({width:"300px"});
    $(".a").animate({height:"300px"});
    $(".a").animate({fontSize:"50px"});
    $(".b").animate({width:"300px"});
    $(".b").animate({height:"300px"});
    $(".b").animate({fontSize:"50px"});
});

queue()

如果在一连串的动画后调用改变样式的函数。那么会先改变css样式,后执行动画。

$(":input").click(function(){
    $(".a").animate({width:"300px"}).animate({height:"300px"}).css("background-color","skyblue"    );
});

解决的方法是使用queue函数,该函数会让动画先执行:

$(":input").click(function(){
    $(".a").animate({width:"300px"}).animate({height:"300px"}).queue(function(){
        $(".a").css("background-color","skyblue"   );
    });
});

但是,这是如果在queue后再接着调用其他动画时会失效,解决方法是在queue函数的末尾调用next(),同时在queue的匿名函数入口传入next
queue(function(next){… next()});

$(":input").click(function(){
    $(".a").animate({width:"300px"});
    $(".a").animate({height:"300px"}).queue(function(next){
        $(".a").css("background-color","skyblue");
        next();
    }).animate({width:"800px"});
});

较老的版本使用dequeue函数达到同样的效果:

$(":input").click(function(){
    $(".a").animate({width:"300px"});
    $(".a").animate({height:"300px"}).queue(function(next){
        $(".a").css("background-color","skyblue");
        $(this).dequeue();
    }).animate({width:"800px"});
});

queue还可以得到当前动画的长度

clearQueue()

清理之后没有开始的动画,并且,clearQueue() 方法移除任何排队的函数。

$(":input").click(function(){
    $(".a").animate({width:"300px"},2000);
    $(".a").animate({height:"300px"},2000);
    $(".a").animate({fontSize:"50px"},2000);
    $(".a").queue(function(next){
        $(".a").css("background-color","skyblue");
        $(this).dequeue();
    }).animate({width:"800px"});
});

$(":input:eq(1)").click(function(){
    $(".a").clearQueue();
});

stop()

stop(clearQueue,gotoEnd)
- clearQueue 停止,并清空后面未执行完的动画。默认为 false (true/false)
- gotoEnd 停止后,当前动画执行完毕的位置,默认为 false (true/false)

默认地,如果有列队动画,stop停止第一个列队动画,而继续执行后面的动画。

$(":button:eq(0)").click(function(){
    $(".a").animate({
        left:"500px"
    },1000);
    $(".a").animate({
        top:"500px"
    },1000);
    $(".a").animate({
        width:"500px"
    },1000);
});
$(":button:eq(1)").click(function(){
    $(".a").stop(true,true);
});

delay()

事件延迟一定的时间
delay(time)

$(":button:eq(0)").click(function(){
    $(".a").animate({
        left:"500px"
    });
    $(".a").animate({
        top:"500px"
    });
    $(".a").delay(1000);
    $(".a").animate({
        width:"500px"
    });
});

animated

之前说过的一个过滤器,可以选择正在执行动画的元素

一个永不停止的动画:

$(".a").slideToggle(function(){
    $(".a").slideToggle(arguments.callee);
});

使用过滤器:

$(":button").click(function(){
    $(":animated").css("backgroundColor","blue");
});

动画的全局属性

全局的动画属性:
- .fx.interval(num).fx.off 关闭动画(true/false)

$.fx.interval = 100;   设置帧数为100 ,动画变得卡顿
$.fx.off = true; 取消所有动画
相关文章
|
20天前
|
机器学习/深度学习 JavaScript
|
1月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
12 0
|
1月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
10 0
|
1月前
|
JavaScript 前端开发
调用jQuery的animate()方法无法移动的问题
调用jQuery的animate()方法无法移动的问题
|
1月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
28 1
|
2月前
|
JavaScript 前端开发
jQuery 第五章(效果,滑动,动画,停止动画)
jQuery 第五章(效果,滑动,动画,停止动画)
36 0
|
4月前
|
JavaScript
jQuery04(事件&动画)
jQuery04(事件&动画)
|
5月前
|
JavaScript
jQuery jquery.color.js 背景颜色支持动画
jQuery jquery.color.js 背景颜色支持动画
50 0
|
5月前
|
JavaScript
jQuery 显示隐藏动画 show(); hide(); toggle();
jQuery 显示隐藏动画 show(); hide(); toggle();
36 0
|
5月前
|
JavaScript
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
jQuery 滑入滑出动画 slideDown(); slideUp(); slideToggle();
41 0

相关产品

  • 云迁移中心
  • 相关课程

    更多