JQuery中的DOM动画

无动画效果的隐藏与显示

hide():在HTML文档中,为一个元素调用hide()方法会将该元素的display样式改为none。

代码功能同css(“display”, “none”)相同。

show():将元素的display样式改为先前的显示状态。

toggle():切换元素的可见状态:如果元素时可见的,则切换为隐藏;如果元素时隐藏的,则切换为可见的。

通过设置透明度效果的隐藏与显示,达到淡入淡出的动画效果

fadeIn(),fadeOut():只改变元素的透明度。

fadeOut() 会在指定的一段时间内降低元素的不透明度,直到元素完全消失。

fadeIn() 则相反。

如,用600毫秒缓慢的将段落淡入:$("p").fadeIn("slow");。

fadeTo():把不透明度以渐近的方式调整到指定的值(0 – 1 之间)。并在动画完成后可选地触发一个回调函数。

如,用200毫秒快速将段落的透明度调整到0.25,动画结束后,显示一个“Animation Done”信息框:

“$("p").fadeTo("fast", 0.25, function(){

alert("Animation Done.");

});”

通过设置高度效果的隐藏与显示,达到滑下与收起的动画效果

slideDown(),slideUp():只会改变元素的高度。

如果一个元素的display属性为none,当调用slideDown() 方法时,这个元素将由上至下延伸显示。

slideUp() 方法正好相反,元素由下至上缩短隐藏。

如,用600毫秒缓慢的将段落滑下:$("p").slideDown("slow");

slideToggle():通过高度变化来切换匹配元素的可见性。

如,200毫秒快速将段落滑上或滑下,动画结束后,会显示一个“Animation Done”信息框:“$("p").slideToggle("fast",function(){

alert("Animation Done.");

});”

时间: 2024-12-10 09:47:06

JQuery中的DOM动画的相关文章

锋利的jQuery读书笔记---jQuery中操作DOM

一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创建文本节点 创建属性节点 插入节点 插入节点的方法 方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码:$("p").append("<b>你好</b>"

jquery 中fadeIn,fadeOut动画

我们在做首页banner图片播放的时候会使用fadeIn,fadeOut动画,这里需要注意的是: fadeIn作用相当于:display:list-item;opcity逐渐变为1 fadeOut作用相当于:display:none;opcity逐渐变为0 有些时候我们需要实现些特殊的fade效果,就需要对图片层级有个划分.利用z-index和opcity联合使用 jquery 中fadeIn,fadeOut动画

HTML5移动开发之路(36)——jQuery中的DOM操作

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(36)--jQuery中的DOM操作 1.查询 利用选择器查找节点 使用 html() / text() / attr() 输出节点文本和属性值. 注意:下拉列表使用 val() [html] view plain copy print? <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery

JavaScript强化教程——JQuery中的DOM编程

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --JQuery中的DOM编程 JavaScript强化教程--JQuery中的DOM编程 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --JQuery中的DOM编程 DOM编程 ---------------------------- js中DOM编程   创建一个标签对象     var p=document.createElement("p"

Jquerry:jquery中的DOM操作&lt;一&gt;

之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:DOM Core.HTML-DOM.CSS-DOM.我们很多情况下用到的getElementById().getElementByTagName().getAttribute()和setAttribute()等方法都是DOM Core的组成部分.而document.forms(获取表单对象).elem

dom core,html dom,css dom,jquery 中的dom操作

前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名")/attr("属性名"))获取属性值, html dom一般利用属性的形式(element.属性名)获取对应属性值,形式相对简洁.此外,针对于css相关的对象,还有css dom 前端开发中的节点有三种:元素节点:文本节点和属性节点 js一般对于dom core和html dom都支

jQuery中的经典动画

show()方法和hide()方法是jQuery中的基本动画方法,hide()方法等于将css()方法设置display属性为none.如何让元素动起来呢,我们可以在show和hide里加入slow,fast,normal或者具体时间 1 $("element").show("slow");//注意加引号哦~ 2 $("element").hide(1000); $("#panel h5.head").toggle(funct

锋利的jQuery ——jQuery中的DOM操作(三)

一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery选择器来选中元素,获取元素节点. 2)查找属性节点 利用jQuery选择器查找到需要的元素后,用attr()方法来获取它的各种属性的值. ②创建节点 1>创建元素节点 创建节点利用$(html),加入元素用append()还可以连写. 2>创建文本节点 创建文本节点直接在创建的html元素里面直接

JQuery中的Dom操作和事件

(一)JQuery中的事件 1.常规事件,把js事件中的on去掉 复合事件:hover(function(){},function(){}) ---- 相当于把鼠标移入移出事件和在一起执行 toggle(function(){},function(){},....)可以写多个,点击事件循环执行 未来元素:对象.live("事件名",function(){});   --- 对未来创建的元素进行操作 列子:点击按钮,创建元素,并给创建的元素添加点击事件 //对象.append():在什么