1366人阅读
Jqurey 淡进淡出的动画效果
1. &&jQuery
hide() 和 show()、toggle()
使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，使用 toggle() 方法来切换 hide() 和 show() 方法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：&slow&、&fast& 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
$(&button&).click(function(){
$(&p&).hide(1000);
$(&button&).click(function(){
$(&p&).toggle();
动画效果：
透明度逐渐降低，形状由右下角到左上角逐渐变小消失。
详细参考：
2.&淡入淡出&fadeIn()、fadeOut()、fadeToggle()、fadeTo()
使用 fadeOut()和 fadeIn() 方法来淡出和淡入 HTML 元素，使用 fadeToggle() 方法来切换 fadeOut() 和 fadeIn() 方法。
fadeTo(duration,0.0)与fadeOut()的区别，fadeTo(duration,0)元素本身看不见了，但它依然占用页面空间。
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值：&slow&、&fast& 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
$(&button&).click(function() {
& & & $(&div.first&).slideUp(300).delay(800).fadeTo('slow',0.2);
& & & $(&div.second&).fadOut(300).fadeIn(400);
动画效果：
透明度逐渐降低或逐渐加强，形状不变
详细参考：
3.&滑动slideDown()、slideUp()、slideToggle()
滑动方法可使元素上下滑动
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
$(&#flip&).click(function(){
& $(&#panel&).slideDown();
动画效果：
元素形状由上至下或由下至上逐渐消失
详细参考：
应用示例：
用JQuery删除一个dom节点，显示动画，让节点先逐渐消失，然后删除
//slideUp(毫秒内元素形状由下至上逐渐消失
//delay(300)对接下来要执行的函数延迟300毫秒执行
//queue是元素的函数队列执行完后，在执行里面function
$(&#objid”).slideUp(1000).delay(300).queue(function() {
$(&#objid“).remove();
queue()方法可以参考：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：55663次
排名：千里之外
转载：53篇
(1)(1)(1)(4)(2)(3)(1)(4)(1)(2)(5)(11)(11)(1)(1)(1)(4)(2)(1)(1)jquery animate方法实现鼠标经过显示离开隐藏效果-jquery-网页制作-壹聚教程网jquery animate方法实现鼠标经过显示离开隐藏效果
jquery中的animate()是可以动态的修改css中属性值并创建动画效果，只要我们在创建时设置高度或宽度之类的就可以了。
animate方法介绍
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 &margin:30px&）。字符串值无法创建动画（比如 &background-color:red&）。
注释：使用 &+=& 或 &-=& 来创建相对动画（relative animations）。
例1.实现鼠标经过显示离开隐藏效果
@CHARSET &UTF-8&;
* html .showbox,* html .overlay {
top: expression(eval(document.documentElement.scrollTop) );
#AjaxLoading {
border: 1px solid #8CBEDA;
color: #37a;
font-size: 12
font-weight:
#AjaxLoading div.loadingWord {
width: 180
height: 50
line-height: 50
border: 2px solid #D6E7F2;
background: #
#AjaxLoading img {
margin: 10px 15
.overlay {
bottom: 0;
z-index: 998;
width: 100%;
height: 100%;
_padding: 0 20px 0 0;
background: #f6f4f5;
.showbox {
left: 50%;
z-index: 9999;
opacity: 0;
filter: alpha(opacity = 0);
margin-left: -80
* 加载动画窗口
* @author dendy
function getLoadingHtml(msg) {
if(!msg) msg = &加载&;
var html = &&div id='loadingDiv'&&
+ &&div style='height: 1325 display: opacity: 0;' class='overlay'&&/div&&
+ &&div style='opacity: 0; margin-top: 250' id='AjaxLoading' class='showbox'&&
+ &&div class='loadingWord'&&
+ &&img src='& + Util.getContentPath() +&/images/ajax-loader.gif'&& + msg + &中，请稍候...&
+ &&/div&&
+ &&/div&&
+ &&div style='height: 1200'&&/div&&
+ &&/div&&;
function ajaxLoadingInit(msg) {
var loadingDiv = getLoadingHtml(msg);
var h = $(document).height();
$(&.overlay&).css({&height&: h});
var div = $(&body&).find(&#loadingDiv&);
div.remove();
$(&body&).append($(loadingDiv));
* 开始显示loading，在ajax执行之前调用
* @param msg 操作消息，&加载&, &保存&, &删除&
function startLoading(msg) {
ajaxLoadingInit(msg);
$(&.overlay&).css({'display':'block','opacity':'0.8'});
$(&.showbox&).stop(true).animate({'margin-top':'300px','opacity':'1'},200);
* 加载完成后隐藏，在ajax执行完成后（complete）调用
function endLoading() {
$(&.showbox&).stop(true).animate({'margin-top':'250px','opacity':'0'},400);
$(&.overlay&).css({'display':'none','opacity':'0'});
定义和用法
$(or).animate(styles,speed,easing,callback)
必需。规定产生动画效果的 CSS 样式和值。
可能的 CSS 样式值（提供实例）：
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
marginBottom
marginLeft
marginRight
outlineWidth
paddingBottom
paddingLeft
paddingRight
paddingTop
letterSpacing
lineHeight
textIndent
注释：CSS 样式使用 DOM 名称（比如 &fontSize&）来设置，而非 CSS 名称（比如 &font-size&）。
可选。规定动画的速度。默认是 &normal&。
可能的值：
毫秒 （比如 1500）
可选。规定在不同的动画点中设置动画速度的 easing 函数。
内置的 easing 函数：
扩展插件中提供更多 easing 函数。
可选。animate 函数执行完之后，要执行的函数。
$(selector).animate(styles,options)
styles 必需。规定产生动画效果的 CSS 样式和值（同上）。
可选。规定动画的额外选项。
可能的值：
speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
animation中的.queue()函数
.queue()初探
接下来我们正经谈谈queue函数
我们还是从一个简单的例子说起：
假如你要让一个黑色背景的小方块div，先收起(slideUp)，在放下(SlideDown)，背景再变成白色，语句应该怎么写？
吸取了上个例子的教训，相信没有会很天真的按顺序写出这样的语句了吧？
$('div').slideUp('slow').slideDown('slow').css({&background&:&red&});
应该怎么写呢？使用queue函数！brilliant！
$('div').slideUp('slow').slideDown('slow').queue(function(next){
&&&&&&&&&&&&&&&&&&& $('#object').css({&background&:&red&});
&&&&&&&&&&&&&&&&&&& next();
&&&&&&&&&&&&&&& });
实际例子就不在页面上展示了，这是一段很简单的代码，应该可以想象得到吧。
在这里我想说明几个问题：
首先，jQuery官方在阐述.queue这个方法的时候有这么一句话很有趣：
This feature is similar to providing a callback function with an animation method,
but does not require the callback to be given at the time the animation is performed.
我们又要回到.queue()的函数定义,其实我们现在这种在queue中加入函数的用法，官方给出的函数原型是：
queue( [ queueName ], callback( next ) )
也就是说我们加入的函数其实是一个关于队列的回调函数。也就是在队列结束之后，系统会自动为你调用你加入的函数。
插一句话，究竟什么是回调函数？百度一下，你就知道。返回结果的第一条就是百度百科关于&回调函数&的解释。但是正如本文章开头所说，它的确给了你很详细很详细的解释，但前提是你能消化那些C++专业词汇和代码&&幸运的是我的Unix网络编程老师(嘿，一位来自北大的博士)曾经给过我们一个很通俗的解释，自己定义，系统调用。回调函数的关键在于我们无法预知它何时被调用。因为我们只是定义了这么一个函数，可能通知系统在完成某一系列的动作后来调用它。
其实我们可以这样考虑，如果把这个函数作为slideDown的回调函数效果不都是一样的吗？因为我们最终想要的只是保证变色函数在slideDown之后执行，slideDown和queue的回调函数都能保证这种效果！look：
$('div').slideUp('slow').slideDown('slow',function(){
&&&&&&&&&&&&&&&&&&& $('#object').css({&background&:&red&});
&&&&&&&&&&&&&&&&&&& });
正是有异曲同工之妙。
还有一点需要注意的是.queue()中的next参数和next()能不能舍去其一或是？
我们上面说到queue中的函数是回调函数，如果我们稍稍对上上面的代码做一些修改，比如：
$('div').slideUp('slow').slideDown('slow').queue(function(next){
&&&&&&&&&&&&&&&&&&& $('#object').css({&background&:&red&});
&&&&&&&&&&&&&&&&&&& //next();
&&&&&&&&&&&&&&& }).hide('slow');
一是我把next()语句注释掉了，二是希望在变色以后再让方块隐藏起来。但是当你运行之后，发现在变色之后无法对方块执行隐藏。
要记住queue中的函数是回调函数呀，默认情况下只有动画队列执行完了，才会调用变色函数，既然动画队列都执行完了，哪里来的hide()?所以next()是保证在执行完这次队列后再次执行下一个动画函数
我曾经尝试过抛弃next参数而保留next()语句，这样的结果是能在现代浏览器(,chrome之类)中运行，但无法在ie6中运行。所以，保留吧 。next和next()是jquery1.4中才开始出现的，而在之前使用的是.dequeue()函数，如果要将这节的例子改为使用dequeue()，如下：
$('#object').slideUp('slow').slideDown('slow').queue(function(){
&&&&&&&&&&&&&&&&&&& $('#object').css({&background&:&red&});
&&&&&&&&&&&&&&&&&&& $(this).dequeue();
&&&&&&&&&&&&&&&&&&& });
自定义队列
我之前有提过其实可以不使用它默认的'fx'队列，这节就教大家怎么自定义一个属于自己的队列，很简单：
我想建立一个名为'custom'的队列，里面有一个能使黑色小方块改变背景颜色的方法,如下：
$(&div&).queue(&custom&, function(next) {
&&& $('div').css({'background':'red'});
&&& next();
所见即所得&&前面一个'custom'代表新队列的队列名(要是我也取'fx'会怎么样？我也不知道，有兴趣的朋友尝试之后可以留言告诉我结果，我也有兴趣会知道)，后面仍然是回调函数，把你想执行的功能堆砌进去。
　　但就这段代码而已，待你真正添加进网页，并且尝试运行，会发现并非&所见即所得&，压根就不会有任何效果。因为我故意省略了一段最最关键的语句&&修改后的如下：
$(&div&).queue(&custom&, function(next) {
&&& $('div').css({'background':'red'});
&&& next();
.dequeue(&custom&); //this is the key
对，就是这句，.dequeue(&custom&)。一般对与dequeue()的定义是&删除队列中最顶部的函数，并且执行它&。我并不赞同用&删除&这个字眼，而是倾向于&取出&，其实这个函数的功能就好像是一个数据结构中队列的指针，待队列中前一个函数执行完后，取下一个队列最顶端的函数。
上一页： &&&&&下一页：相关内容javascript DOM(五)----插入、删除节点
&1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
& &&&var reference =& element.insertBefore(newNode,targetNode);
&&&&&&&& 节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。&
&&& 2). 自定义 insertAfter() 方法&&&&
& * 将 newChild 插入到 refChild 的后边
& * @param {Object} newChild
& * @param {Object} refChild
&function insertAfter(newChild, refChild){
&&var refParentNode = refChild.parentN
&&//判断 refChild 是否存在父节点
&&if(refParentNode){
&&&//判断 refChild 节点是否为其父节点的最后一个子节点
&&&if(refChild == refParentNode.lastChild){
&&&&refParentNode.appendChild(newChild);
&&&&refParentNode.insertBefore(newChild, refChild.nextSibling);
&&& &head&&
&&&&&&& &meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&&
&&&&&&& &title&Untitled Document&/title&&
&&&&&&& &script type=&text/javascript&&&
&&&&&&&&&&&&&
&&&&&&&&&&& window.onload = function(){&
&&&&&&&&&&&&&&& //1. 新建一个 &&li&伦敦&/li&&, 并将该节点添加到 #dj 的前边&
&&&&&&&&&&&&&&& var ld = document.createElement(&li&);&
&&&&&&&&&&&&&&& ld.appendChild(document.createTextNode(&伦敦&));&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& document.getElementById(&city&).insertBefore(ld, document.getElementById(&dj&));&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& //2. 新建一个 &&li&纽约&/li&&, 并将该节点添加到 #dj 的后边&
&&&&&&&&&&&&&&& var ny = document.createElement(&li&);&
&&&&&&&&&&&&&&& ny.appendChild(document.createTextNode(&纽约&));&
&&&&&&&&&&&&&&& insertAfter(ny, document.getElementById(&dj&));&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& //3. 新建一个 &&li&芝加哥&/li&&, 并将该节点添加到 &首尔& 节点的后边&
&&&&&&&&&&&&&&& var zjg = document.createElement(&li&);&
&&&&&&&&&&&&&&& zjg.appendChild(document.createTextNode(&芝加哥&));&
&&&&&&&&&&&&&&& insertAfter(zjg, document.getElementById(&city&).lastChild);&
&&&&&&&&&&& };&
&&&&&&&&&&&&&
&&&&&&&&&&& /**
&&&&&&&&&&&& * 把 newChild 放到 targetChild 节点的后边
&&&&&&&&&&&& * @param {Object} newChild
&&&&&&&&&&&& * @param {Object} targetChild
&&&&&&&&&&&& */&
&&&&&&&&&&& function insertAfter(newChild, targetChild){&
&&&&&&&&&&&&&&& //1. 获取 targetChild 的父节点&
&&&&&&&&&&&&&&& var parentNode = targetChild.parentN&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& //2. 判断 targetChild 节点是否为其父节点的最后一个子节点&
&&&&&&&&&&&&&&& if(parentNode){&
&&&&&&&&&&&&&&&&&&& //3. 若是最后一个子节点: 则直接把 newChild 加为 targetChild 父节点的子节点即可&
&&&&&&&&&&&&&&&&&&& if(parentNode.lastChild == targetChild){&
&&&&&&&&&&&&&&&&&&&&&&& parentNode.appendChild(newChild);&
&&&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&&&&&&&& //4. 若不是最后一个子节点: 则先获取 targetChild 节点的下一个兄弟节点, 然后调用 insertBefore() 方法&
&&&&&&&&&&&&&&&&&&& else{&
&&&&&&&&&&&&&&&&&&&&&&& parentNode.insertBefore(newChild, targetChild.nextSibling);&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&&&& }&
&&&&&&&&&&& }&
&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&& &/script&&
&&& &/head&&
&&& &body&&
&&&&&&& &p&你喜欢哪个城市?&/p&&
&&&&&&& &ul id=&city&&&
&&&&&&&&&&& &li id=&bj& name=&BeiJing&&北京&/li&&
&&&&&&&&&&& &li&上海&/li&&
&&&&&&&&&&& &li id=&dj&&东京&/li&&
&&&&&&&&&&& &li&首尔&/li&&
&&&&&&& &/ul&&
&&&&&&& &br&&br&&
&&&&&&& &p&你喜欢哪款单机游戏?&/p&&
&&&&&&& &ul id=&game&&&
&&&&&&&&&&& &li id=&rl&&红警&/li&&
&&&&&&&&&&& &li&实况&/li&&
&&&&&&&&&&& &li&极品飞车&/li&&
&&&&&&&&&&& &li&魔兽&/li&&
&&&&&&& &/ul&&
&&&&&&& &br&&br&&
&&&&&&& gender:&&
&&&&&&&&&&& &input type=&radio& name=&gender& value=&male&/&Male&
&&&&&&&&&&& &input type=&radio& name=&gender& value=&female&/&Female&
&&& &/body&&
&/html&&&&&
&删除节点:
&1). removeChild(): 从一个给定元素里删除一个子节点
&& &&&var reference = element.removeChild(node);
&&返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
&&如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。
&&& &head&&
&&&&&&& &meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&&
&&&&&&& &title&Untitled Document&/title&&
&&&&&&& &script type=&text/javascript&&&
&&&&&&&&&&&&&
&&&&&&&&&&& window.onload = function(){&
&&&&&&&&&&&&&&& //1. 为每一个 li 节点添加一个 click 响应函数, 从文档中删除自己&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& var liNodes = document.getElementsByTagName(&li&);&
&&&&&&&&&&&&&&& for(var i = 0; i & liNodes. i++){&
&&&&&&&&&&&&&&&&&&& liNodes[i].onclick = function(){&
&&&&&&&&&&&&&&&&&&&&&&& this.parentNode.removeChild(this);&
&&&&&&&&&&&&&&&&&&& };&
&&&&&&&&&&&&&&& }&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&& };&
&&&&&&&&&&&&&
&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&& &/script&&
&&& &/head&&
&&& &body&&
&&&&&&& &p&你喜欢哪个城市?&/p&&
&&&&&&& &ul id=&city&&&
&&&&&&&&&&& &li id=&bj& name=&BeiJing&&北京&/li&&
&&&&&&&&&&& &li&上海&/li&&
&&&&&&&&&&& &li id=&dj&&东京&/li&&
&&&&&&&&&&& &li&首尔&/li&&
&&&&&&& &/ul&&
&&&&&&& &br&&br&&
&&&&&&& &p&你喜欢哪款单机游戏?&/p&&
&&&&&&& &ul id=&game&&&
&&&&&&&&&&& &li id=&rl&&红警&/li&&
&&&&&&&&&&& &li&实况&/li&&
&&&&&&&&&&& &li&极品飞车&/li&&
&&&&&&&&&&& &li&魔兽&/li&&
&&&&&&& &/ul&&
&&&&&&& &br&&br&&
&&&&&&& gender:&&
&&&&&&&&&&& &input type=&radio& name=&gender& value=&male&/&Male&
&&&&&&&&&&& &input type=&radio& name=&gender& value=&female&/&Female&
&&& &/body&&
&/html&&&&&
&innerHTML属性:
&1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容
&&& &head&&
&&&&&&& &meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&&
&&&&&&& &title&Untitled Document&/title&&
&&&&&&& &script type=&text/javascript&&&
&&&&&&&&&&&&&
&&&&&&&&&&& window.onload = function(){&
&&&&&&&&&&&&&&& //1. 获取 city 节点中的内容&
&&&&&&&&&&&&&&& var cityNode = document.getElementById(&city&);&
&&&&&&&&&&&&&&& alert(cityNode.innerHTML);&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& //2. 把 city 节点中内容换为 #game 节点的内容&
&&&&&&&&&&&&&&& cityNode.innerHTML = document.getElementById(&game&).innerHTML;&
&&&&&&&&&&& };&
&&&&&&&&&&&&&
&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&& &/script&&
&&& &/head&&
&&& &body&&
&&&&&&& &p&你喜欢哪个城市?&/p&&
&&&&&&& &ul id=&city&&&
&&&&&&&&&&& &li id=&bj& name=&BeiJing&&北京&/li&&
&&&&&&&&&&& &li&上海&/li&&
&&&&&&&&&&& &li id=&dj&&东京&/li&&
&&&&&&&&&&& &li&首尔&/li&&
&&&&&&& &/ul&&
&&&&&&& &br&&br&&
&&&&&&& &p&你喜欢哪款单机游戏?&/p&&
&&&&&&& &ul id=&game&&&
&&&&&&&&&&& &li id=&rl&&红警&/li&&
&&&&&&&&&&& &li&实况&/li&&
&&&&&&&&&&& &li&极品飞车&/li&&
&&&&&&&&&&& &li&魔兽&/li&&
&&&&&&& &/ul&&
&&&&&&& &br&&br&&
&&&&&&& gender:&&
&&&&&&&&&&& &input type=&radio& name=&gender& value=&male&/&Male&
&&&&&&&&&&& &input type=&radio& name=&gender& value=&female&/&Female&
&&& &/body&&
&/html&&&&&
本文出自&change&
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'jQuery删除节点用法示例(remove方法)
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
本文实例讲述了jQuery删除节点的方法。分享给大家供大家参考，具体如下：&html&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&&/title&&script src="js/jquery-1.10.1.min.js" type="text/"&&/script&&script type="text/javascript"&//&![CDATA[$(function(){
//第一种删除的方法
$("ul li:eq(1)").remove(); // 获取第二个&li&元素节点后，将它从网页中删除。
//第二种删除的方法
var $li = $("ul li:eq(1)").remove(); // 获取第二个&li&元素节点后，将它从网页中删除。
$li.appendTo("ul"); // 把刚才删除的又重新添加到&ul&元素里
//所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它
//第三种删除的方法
$("ul li").remove("li[title!=菠萝]"); //把&li&元素中属性title不等于"菠萝"的&li&元素删除
//第四种删除的方法
$("ul li:eq(1)").empty(); // 获取第二个&li&元素节点后，清空此元素里的内容});//]]&&/script&&/head&&body&&p title="选择你最喜欢的水果." &你最喜欢的水果是?&/p&&ul&
&li title='苹果'&苹果&/li&
&li title='橘子'&橘子&/li&
&li title='菠萝'&菠萝&/li&&/ul&&/body&&/html&效果图如下：更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》希望本文所述对大家jQuery程序设计有所帮助。
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
有三种东西必须控制：情绪、语言、行为；有三个问题必须思考：生命、死亡、永恒；有三种品质必须尊敬：坚毅、自尊、仁慈；有三种习惯必须培育：理性、谦逊、好学；
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net35+ 个 jQuery 实现的动画技术教程 - 开源中国社区
当前访客身份：游客 [
当前位置：
35+ 个 jQuery 实现的动画技术教程
Experimental CSS3 Animations for Image Transitions
Item Blur Effect with CSS3 and jQuery
Experiments with background-clip: text
Lateral On-Scroll Sliding with jQuery
Typography Effects with CSS3 and jQuery
Hover and Click Trigger for Circular Elements with jQuery
Fullscreen Image 3D Effect with CSS3 and jQuery
Wave Display Effect with jQuery
Scrollbar Visibility with jScrollPane
Elastislide – A Responsive jQuery Carousel Plugin
Automatic Image Montage with jQuery
Image Zoom Tour with jQuery
Circular Content Carousel with jQuery
Portfolio Image Navigation with jQuery
Dynamic Page / Replacing Content
jQuery Sticky Footer
Bubble Point Tooltips with CSS3 & jQuery
jQuery MagicLine Navigation
How to Make a Smooth Animated Menu with jQuery
Chained AJAX Selects
HTML5 File Uploads with jQuery
Shuffle Letters Effect: a jQuery Plugin
Display your Favorite Tweets using PHP and jQuery
Bubble Slideshow Effect with jQuery
Photobooth with PHP, jQuery and CSS3
Making a Custom Facebook Wall with jQuery Templates
Better Check Boxes with jQuery and CSS
Client Testimonials Powered by PHP, XML and jQuery
How to Create a jQuery Confirm Dialog Replacement
Making an Apple-style Splash Screen
Creating a Stylish Coming Soon Page with jQuery
Making a jQuery Countdown Timer
How to Block Adblock
Google Powered Site Search with jQuery
Quick Feedback Form w/ PHP and jQuery
Build An Incredible Login Form With jQuery
jQuery 的详细介绍：
jQuery 的下载地址：
想通过手机客户端（支持 Android、iPhone 和 Windows Phone）访问开源中国：
旧一篇： 5年前
新一篇： 5年前
相关讨论话题
你也许会喜欢
与内容无关的评论将被删除，严重者禁用帐号
本周热点资讯
本站最新资讯