为了账号安全,请及时绑定邮箱和手机立即绑定

jquery复习之路---动画与特效

一,显示与隐藏

show()和hide()显示与隐藏
和原生的js的display:block/none一样;show(speed,[callback])和hide(speed,[callback])显示与隐藏;在显示或隐藏之后,执行callback函数,callback函数为每个元素执行一次。

toggle()方法,切换元素可见状态
toggle()的三种调用方式:1,无参数toggle() ; 2,有参数toggle(switch) true为显示元素,false为隐藏元素;3,动画调用toggle(speed,[callback])若为显示状态,则切换为隐藏状态,若为隐藏状态,则切换为显示状态

二,滑动动画

slideDown()与slideUp()方法
$(selector).slideDown()和$(selector).slideUp();以滑动的方式显示与隐藏; 适合display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。
slideDown(speed,[callback])和slideUp(speed,[callback])
功能是以动画的效果将被选元素的高度向下增大,或者减小,呈现滑动的效果;
slideToggle(speed,[callback])切换滑动效果

三,淡入淡出效果

淡入淡出效果fadeIn()与fadeOut()
$(selector).fadeIn()与$(selector).fadeOut();改变元素的透明度的方式实现淡入淡出的效果;
fadeIn(speed,[callback])和fadeOut(speed,[callback])淡入淡出
fadeTo(speed,opacity,[callback])淡入淡出到指定的透明度

四,自定义动画

自定义动画animate(params,[duration],[easing],[callback])
自定义各种复杂的动画params为制作动画的属性样式(css属性)和值集合,使用使用Camel标记法书写属性名,如paddingLeft而不是padding-left;同时颜色动画必须要下载颜色动画插件https://plugins.jquery.com/color/;duration为默认的slow或者fast或者normal或者自定义的数字;easing为动画插件使用,用于控制动画效果一般有linear和swing;callback为动画完成之后的执行的回调函数

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.easing.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"
            integrity="sha256-Wp3wC/dKYQ/dCOUD7VUXXp4neLI5t0uUEF1pg0dFnAE=" crossorigin="anonymous"></script>
  $(selector).animate({
                   width: 'toggle',
                   height: 'toggle',
                   paddingLeft:'5px',
                   backgroundColor:'red',
               }, {
                   duration: 5000,
                   specialEasing: {
                       width: 'linear',
                       height: 'easeOutBounce',
                       paddingLeft:"easeOutBounce",
                       backgroundColor:"linear"
                   },
                   complete: function() {
                       $(this).after('<div>Animation complete.</div>');
                   }
               })

一个元素使用多个animate()动画,队列动画,依次执行

         $(selector).animate({width:"100px"},"slow")//队列一
                        .animate({height:"100px"},"slow")//队列二
                        .animate({width:"50px"},"fast")//队列三
                        .animate({height:"50px"},"normal")//队列四
五,停止animate()动画的方法stop()和延迟动画delay()

stop([clearQueue],[gotoEnd])功能是停止所选元素正在执行的动画
可选参数clearQueue为布尔值,表示是否停止正在执行的动画,可选参数gotoEnd为布尔值,表示是否立即完成正在执行的动画
delay(duration,[queueName])功能是设置一个延时值,推迟后续队列中动画的执行
duration 为推迟动画执行的时间 ,queueName为队列名称

点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消