jquery的效果

jquery的基本效果包括隐藏、显示、切换，滑动，淡入淡出，以及动画等等。

一、隐藏与显示

通过调用hide()和show(）方法实现。

语法如下：

$(selector).hide(speed,callback); $(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$(selector).toggle(speed,callback);

二、淡入淡出

jQuery fadeIn() 用于淡入已隐藏的元素显示在页面上

$(selector).fadeIn(speed,callback);

jQuery fadeOut() 方法用于淡出可见元素消失在页面上

$(selector).fadeOut(speed,callback);

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

$(selector).fadeToggle(speed,callback);

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

三、滑动效果

调用slideDown(）和sildeUp().

jQuery slideDown() 方法用于向下滑动元素。

jQuery slideUp() 方法用于向上滑动元素。

语法：

$(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback);

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

$(selector).slideToggle(speed,callback);

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

四、创建动画

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

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

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

五、停止动画

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

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

六、Callback()

$(selector).action(**,callback())

callback函数是在动画完成后才调用的。

六、jquery 链

Chaining 允许在一条语句中运行多个 jQuery 方法（在相同的元素上）。这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

注意：当进行链接时，代码行会变得很差。

转载于:https://www.cnblogs.com/taoHongFei/p/8559413.html

(二)jquery学习----jquery的效果相关推荐

jQuery学习--jQuery 删除元素
删除元素/内容 jQuery remove() 方法 jQuery remove() 方法删除被选元素及其子元素. remove() 方法移除被选元素,包括所有的文本和子节点. 该方法也会移除被选元素 ...
从零开始学习jQuery (二) 万能的选择器
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
[乐意黎转载]从零开始学习jQuery (二) 万能的选择器
一.摘要本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 二.前言编写任何javascript程 ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
【jQuery学习】—实现弹幕效果
[jQuery学习]-实现弹幕效果
jQuery学习（十二）—jQuery中对象的查找方法总结
jQuery学习(十二)-jQuery中对象的查找方法总结一.find方法作用:在元素1中查找元素2,类似于选择器中的后代选择器格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...
jQuery学习（二）—jQuery对象的获取
jQuery学习(二)-jQuery对象的获取

(二)jquery学习----jquery的效果

jquery的效果

(二)jquery学习----jquery的效果相关推荐

最新文章

热门文章