(1)show 语法:
$(selector).show(speed,callback)显示元素参数:
speed:可选参数,表示速度,可能的值包括:毫秒,"slow","normal","fast"。callback:可选参数,show 函数执行完之后,要执行的函数。(2)hide
隐藏元素,用法和show一样(3)toggle 语法:
$(selector).toggle(speed,callback,switch)参数:
前两个参数和show一样switch:可选,布尔值。规定toggle是否隐藏或显示所有被选元素,True - 显示所有元素,False - 隐藏所有元素,如果设置此参数,则无法使用 speed 和 callback 参数。(1)滑动
slideDown:用于向下滑动元素slideUp:用于向上滑动元素。slideToggle:可以在 slideDown() 与 slideUp() 方法之间进行切换例如:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/jquery/jquery-3.1.1.js"></script></head><body><script> $(document).ready(function () { $(".flip").on("click", function () { $(".panel").slideToggle(); }); });</script><style type="text/CSS"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; width: 300px; } div.panel { height:120px; }</style><div class="panel"> <p>hello world</p></div><p class="flip">点击这里</p></body></html>(2)淡入淡出
fadeIn:淡入已隐藏的元素fadeOut:淡出可见元素fadeToggle:可以在 fadeIn() 与 fadeOut() 方法之间进行切换fadeTo:方法允许渐变为给定的不透明度注意:$(selector).fadeTo(speed,opacity,callback),fadeTo语法不太一样,opecity代表指定的不透明度。
(1)animate 语法一:
$(selector).animate(styles,speed,easing,callback)styles:规定产生动画效果的 CSS 样式和值。easing:可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数:swing,linear。扩展插件中提供更多 easing 函数。语法二:
$(selector).animate(styles,options)options:可选。规定动画的额外选项。可能的值:speed - 设置动画的速度easing - 规定要使用的 easing 函数callback - 规定动画完成之后要执行的函数step - 规定动画的每一步完成之后要执行的函数queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数(2)stop
$(selector).stop(stopAll,goToEnd)停止当前正在运行的动画。stopAll:可选。规定是否停止被选元素的所有加入队列的动画。goToEnd:可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。有些用法我也不是很明白,就等项目中用到再具体研究吧
新闻热点
疑难解答