jQuery动画效果总结

jQuery动画效果总结
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：黄富滔
撰写时间：2020年5月03日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
知识点罗列：
1、jQuery中的显示和隐藏效果
①show([speed],[easing],[fn])    显示已经隐藏的元素
②hide([speed],[easing],[fn])    隐藏已经显示的元素
③toggle([speed],[easing],[fn])  显示与隐藏之间的切换，等于把show和hide综合起来。
   上面三个方法都可以传入三个参数：
参数一：动画运行的时间，以毫秒为单位，可能的值：slow，normal，fast。。（1000ms=1s）
参数二：动画运行的效果，默认值为swing，其他参数值还有linear等等,
参数三：在动画完成后执行的函数。
 例如：    $("#elem").click(function(){
$("#elem").show(1000,swing,function(){
alert("elem已经显示出来了"),
})
})

2、jQuery中的滑动效果
①slideDown([speed],[easing],[fn])      向下滑动元素，直道元素全部显示出来  
②slideUp([speed],[easing],[fn])        向下滑动元素，直道元素全部影藏出来  
③slideToggle([speed],[easing],[fn])    向上滑动与向下滑动之间的 
上面三个方法都可以传入三个参数：
参数一：动画运行的时间，以毫秒为单位，可能的值：slow，normal，fast。。（1000ms=1s）
参数二：动画运行的效果，默认值为swing，其他参数值还有linear等等,
参数三：在动画完成后执行的函数。

3、jQuer淡入淡出效果(opacity:透明度，透明度的值0~1)
① fadeOut([speed],[easing],[fn])    通过不透明度的变化来实现所有匹配元素的淡出效果
②fadeIn([speed],[easing],[fn])      通过不透明度的变化来实现所有匹配元素的淡入效果
③fadeToggle([speed],[easing],[fn])  通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
参数说明：
参数一：动画运行的时间，以毫秒为单位，可能的值：slow，normal，fast。。（1000ms=1s）
参数二：动画运行的效果，默认值为swing，其他参数值还有linear等等,
参数三：在动画完成后执行的函数。

    例如  function fadeToFun() {
            $("#elem").fadeTo(1000,0.5);
        }

小结：以上三种动画效果的方法，参数可以传入，也可以不传入参数，也可以传入一个或两个参数

4、jQuery自定义动画
什么是自定义动画？顾名思义就是自己综合各个动画效果，多个动画效果来达到更复杂的结果
     animate(params,[speed],[easing],[fn]) 用于创建自定义动画的函数。
参数说明：
    参数一：一组包含作为动画属性和终值的样式属性和及其值的集合{属性:属性值,属性:属性值}
        参数二：动画运行的时间，以毫秒为单位，可能的值：slow，normal，fast。。（1000ms=1s）
参数三：动画运行的效果，默认值为swing，其他参数值还有linear等等,
参数四：在动画完成后执行的函数。

参数一详细了解：是一种类似于键值对形式的参数。
param参数的特别说明：要特别注意所有用于动画的属性必须是数字的，除非另有说明；
       这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，borderWidth、margin、padding、
       width、height、fontSize、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。
       background-color很明显不可以，因为参数是red或者GBG这样的值，除非用插件，否则正常情况下是不能只用动画效果的。
     注意，CSS样式使用DOM中属性的写法（比如 "fontSize"）来设置，如要使用"font-size"则需要加双引号。
   特别注意：单位，属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用
                  $("#elem").animate({
                        left: 50,
                        width: '50px'
                        opacity: 'show',
                        fontSize: "10em",
                    }, 500);
      除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏
                    $("#elem").animate({
                        width: "toggle"
                    });
       如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的
                   $("#elem") .animate({
                        left: '+=50px'
                    }, "slow");