小白学前端------------jQuery动画

一.jQuery动画

1.1 基本效果

参数详解

speed:三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值(如：1000)
easing    : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn        : 在动画完成时执行的函数，每个元素执行一次。

hide(speed,fn)		隐藏
show(speed,fn)		显示
toggle(speed,fn)	切换

宽高(height/width padding),透明度(opacity)变化  最后变为display:none/block

1.2 滑动效果

slideDown([s],[e],[fn])      通过高度,上下padding变化（向下增大）来动态地显示所有匹配的元素,隐藏
slideUp([s,[e],[fn]])        通过高度,上下padding变化（向上减小）来动态地隐藏所有匹配的元素,显示
slideToggle([s],[e],[fn])    通过高度变化来切换所有匹配元素的可见性,切换

只有高度和padding变化

1.3淡入淡出效果

fadeIn([s],[e],[fn])        通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut([s],[e],[fn])       通过不透明度的变化来实现所有匹配元素的淡出效果
fadeToggle([s,[e],[fn]])    通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
fadeTo([s],opacity,[e],[fn])把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,opacity必须写

只有opacity变化

1.4自定义动画

animate(p,[s],[e],[fn])

参数详解
params: 一组包含作为动画属性和终值的样式属性和及其值的对象
speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".一般不设置
fn: 在动画完成时执行的函数，每个元素执行一次。

1.5 动画控制

stop([c],[j])		停止动画       停止所有在指定元素上正在运行的动画
delay(d,[q])   		延迟等待			设置一个延时来推迟执行队列中之后的项目
finish([queue])		瞬间完成动画     停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

is(':animated')  判断是否执行动画   返回布尔值

if($('#box').is(':animated')){
            return false;
        }

1.6 jQuery插件

• < http://www.jq22.com/> jQuery插件库

1.6.1select2 下拉框搜索插件

• 官网 https://select2.org/

• github <https://github.com/select2/select2

• 用法

  $(dom).select2()
  $(dom).select({
    width:,
    data:,
    ajax:,
    ....
  })
  

1.6.2 datetimepicker 时间日期插件

• github https://github.com/xdan/datetimepicker

• 文档 https://xdsoft.net/jqplugins/datetimepicker/

• 用法

  //设置语言
  $.datetimepicker.setLocale('zh');
  //调用插件
  $(dom).datetimepicker({
    datepicker:,
    timepicker:,
    format:"Y-m-d H:i",
    value:，
    ....
  })
  

1.6.3 fullpage 全屏滚动插件

• 官网 https://alvarotrigo.com/fullPage/zh/

• github https://github.com/alvarotrigo/fullpage.js/

• 用法

  <!--HTML部分-->
  <div id="fullpage>
      <div class="section"></div>
      <div class="section">
          <div class="slide"></div>
          <div class="slide"></div>
          <div class="slide"></div>
      </div>
      <div class="section"></div>
      <div class="section"></div>
  </div>
  自定义的导航 卸载包裹元素的外面
  
  <!--JS部分-->
  <script>
      $("#fullpage").fullpage({
        navigation: true,
        sectionsColor: []
        .....
      })
  </script>
  

1.6.4 lazyload 图片懒加载

• 官网 https://appelsiini.net/projects/lazyload/

• github https://github.com/tuupola/jquery_lazyload/tree/2.x

• 用法

  $("#lazyWrapper img").lazyload()
  

1.6.5 layer 弹窗插件

• 官网 http://layer.layui.com/?alone

• github https://github.com/sentsin/layer/

• 用法

  layer.alert()
  layer.confirm()
  layer.msg()
  layer.load()
  layer.tips()
  layer.colse()
  layer.open({
    type: ,
    title: ,
    content: 
    ....
  })
  ...
  

1.6.7 nice validator 表单验证s

• 官网 https://validator.niceue.com/

• github https://github.com/niceue/nice-validator

• 用法

  $("form").validator({
  
  })