介绍 $ (“.btn2") .click(函数(){
$ (“p") .slideDown ();
}); (“p") .slideUp美元(“slow"); “p" .slideToggle(美元“fast"、功能(){
alert (“hello world !“) “p" .fadeIn (“fast"、功能(){
警报(“hello world !”);
}); “p" .fadeOut(美元“fast"、功能(){
警报(“hello world !”);
}); “p" .fadeTo(美元0.25,“fast"函数(){
警报(“hello world !”);
}); “p" .fadeToggle(美元“fast"、功能(){
警报(“hello world !”);
}); & lt; body>
& lt; div id=癰ox"祝辞
& lt; div id=癰tn"祝辞点击这里,显示或隐藏& lt;/div>
& lt; div id=癱ontent"祝辞jQuery是一个快速,简洁的JavaScript框架,是继原型之后又一个优秀的JavaScript代码库(或JavaScript框架)& lt;/div>
& lt;/div>
& lt;脚本src=https://www.yisu.com/zixun/" jquery/jquery-1.12.4.js ">
小编给大家分享一下jQuery中实现动画效果的方法有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
jQuery中的动画效果有:slideDown, slideUp等实现滑动效果;渐明,fadeToggle等实现淡入淡出的效果
jQuery有很多方法可以帮助我们在页面上实现很多有趣好玩的动画效果,而且程序代码简单比用原生态的JavaScript代码实现效果更加方便简洁。
<强>滑动效果
slideDown ()
可以通过高度变化从下往上增大,并且以滑动的方式显示隐藏的内容
slideUp ()
可以通过高度变化从上往下减小
slideToggle((速度),(放松),(fn))
通过高度变化来切换所有匹配元素的可见性
例:快速将段落滑上或滑下,之后弹出一个对话框
<强>淡入淡出
渐显()
通过设置不透明度的变化来实现所有匹配元素的淡入效果
例:用200毫秒快速将段落淡入,之后弹出一个对话框
渐隐()
通过设置不透明度的变化来实现所有匹配元素的淡出效果
例:用200毫秒快速将段落淡出,之后弹出一个对话框
fadeTo ()
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
用200毫秒快速将段落的透明度调整到0.25,大约1/4的可见度,之后弹出一个对话框
fadeToggle ()
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
例:用200毫秒快速将段落淡入,之后弹出一个对话框
<强>案例:当我们鼠标点击按钮时隐藏的内容显示,并且淡出消失
