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" src="jquery.easing.min.js"></script>
    <script src="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为队列名称