[JQuery]中常用的动画和方法

注意事项!!!

1.在JQ事件中没有on

2.给谁绑定的事件this就是谁

3.在JQ中加动画之前先执行一下stop(),因为先要停止上一个动画再去开启下一个动画

---

1) 隐藏 hide( )

$box.stop().hide(); -->直接隐藏(无过度动画)
⬇️就是逐渐减小宽高值-->直至0
$box.stop().hide("fast"); -->快速隐藏
$box.stop().hide("slow"); -->慢速隐藏
$box.stop().hide(2000);   -->以2000毫秒完成过度渐隐

2) 显示show( )

$box.stop().show(); -->直接显示(无过渡动画)
⬇️就是逐渐增加宽高值-->直至样式设定大小
$box.stop().show("fast"); -->快速显示
$box.stop().show("slow"); -->放慢显示
$box.stop().show(2000); -->以2000毫秒完成过度渐显

3) 收起slideUp( )

⬇️通过不断减小Height值让元素实现逐渐变短直至0->隐藏消失
$box.stop().slideUp(); -->正常收起隐藏
$box.stop().slideUp("fast"); -->快速收起隐藏
$box.stop().slideUp("slow"); -->慢速收起隐藏
$box.stop().slideUp(2000);  -->自定时间决定动画快慢

4) 展开slideDown( )

⬇️通过不断的增加元素Height值,让元素实现逐渐展开动画效果
$box.stop().slideDown();  -->正常速度展开
$box.stop().slideDown("fast"); -->快速展开
$box.stop().slideDown("slow"); -->慢速展开
$box.stop().slideDown(2000);  -->自定时间决定动画快慢

5) 自动收放slideToggle( )

⬇️检测当前元素动画值是否开启,关闭时让他开启/开启的让他关闭
$box.stop().slideToggle(); -->正常动画速度
$box.stop().slideToggle("fast"); -->快速动画速度
$box.stop().slideToggle("slow"); -->慢速动画速度
$box.stop().slideToggle(3000); -->自定时间动画速度

6) fadeIn( )/fadeOut()dan