2021-05-08

                                          JQuery效果

1.显示隐藏

        hide(speed,callback) & show(speed,callback)

        jQuery 使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。

        toggle()方法来切换 hide() 和 show() 方法。

 

  参数:

       speed：(可选)指定切换速度，可以是预设的("slow","normal", or "fast")或表示动画时长的毫秒数

       callback：(可选)完成时执行函数 

 

下面的意思是点击#btn1按钮控制盒子隐藏元素,点击#btn2按钮控制盒子显示元素,点击#btn3可按钮控制盒子显示和隐藏

 

               

2. 淡入淡出

            fadeIn(speed,callback)用于淡入已隐藏的元素。

            fadeOut(speed,callback)用于淡出已隐藏的元素。

            fadeToggle(speed,callback)方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

 

   参数：

            speed：可选，规定效果的时长，可以取值："slow"、"fast" 或毫秒。

            callback：可选，是 fading 完成后所执行的函数名称。

下面的意思是点击#btn5按钮控制盒子隐藏元素淡出已隐藏的元素，点击#btn4按钮控制盒子隐藏元素淡入已隐藏的元素，点击#btn6可按钮控制盒子淡出已隐藏和淡入已隐藏，点击#btn6可按钮控制调整透明度到 0.2 。

 

3. 渐变为给定的不透明度（值介于 0 与 1 之间）

fadeTo(speed,opacity,callback)

speed：必填，规定效果的时长，可以取值："slow"、"fast" 或毫秒。

opacity：必填，将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

callback：可选，是 fading 完成后所执行的函数名称。

下面的意思是点击#btn7,div1中的内容渐变淡，值介于 0 与 1 之间不透明度。

 

4. 滑动

slideDown(speed,callback)方法用于向下滑动元素;

slideUp(speed,callback)方法用于向上滑动元素。

=slideToggle(speed,callback)方法可以在 slideDown() 与 slideUp() 方法之间进行切换。 

参数：

speed：可选，规定效果的时长，可以取值："slow"、"fast" 或毫秒。

callback：可选，是滑动完成后所执行的函数名称。

下面的意思是点击#btn9,div1中的内容上滑动元素,点击#btn8,div1中的内容下滑动元素,点击#btn10, slideDown() 与 slideUp() 方法之间进行切换，也就是点击#btn9,div1中的内容下滑动元素,点击#btn8,div1中的内容上滑动元素。

 

5. 动画

animate({params},speed,callback)方法用于创建自定义动画。

stop() 方法用于停止动画或效果，在它们完成之前。

em 相对长度单位 初始值 16px  1em = 16px;3em=48px;

rem 相对根元素 html 16px  1rem = 16px;

参数

animate({params},speed,callback)方法用于创建自定义动画。而animate的三个值为：

params：必填，定义形成动画的 CSS 属性。

speed：可选，规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。         

callback：可选，动画完成后所执行的函数名称。

下面的意思是animate方法用于创建自定义动画，stop 方法用于停止动画或效果，在它们完成之前delay渐变为给定的透明度。

这是我所学到的一些JQuery效果，分享给你们，希望可以帮助到你们。

新手上道，请多多指教，大神勿喷。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔，谢谢！