jQuery+css3实现Ajax点击后动态删除功能的方法

本文实例讲述了jQuery+css3实现Ajax点击后动态删除功能的方法。分享给大家供大家参考。具体如下：
这里使用jquery实现ajax动态删除一个方框，并带有动画缓冲效果，在google plus网站发现的特效，在此献丑模仿了一番，已基本与Google Plusp功能相同，你可在方框中加入一些内容，jquery插件选的版本是1.6.2,更高版本也是可以的。
运行效果截图如下：
具体代码如下：
<！DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery+css3实现Ajax动态点击删除功能</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript">jQuery.easing["jswing"] = jQuery.easing["swing"];jQuery.extend（ jQuery.easing,{def: "easeOutQuad",swing: function （x, t, b, c, d） {return jQuery.easing[jQuery.easing.def]（x, t, b, c, d）;},easeInQuad: function （x, t, b, c, d） {return c*（t/=d）*t + b;},easeOutQuad: function （x, t, b, c, d） {return -c *（t/=d）*（t-2） + b;},easeInOutQuad: function （x, t, b, c, d） {if （（t/=d/2） < 1） return c/2*t*t + b;return -c/2 * （（--t）*（t-2） - 1） + b;},easeInCubic: function （x, t, b, c, d） {return c*（t/=d）*t*t + b;},easeOutCubic: function （x, t, b, c, d） {return c*（（t=t/d-1）*t*t + 1） + b;},easeInOutCubic: function （x, t, b, c, d） {if （（t/=d/2） < 1） return c/2*t*t*t + b;return c/2*（（t-=2）*t*t + 2） + b;},easeInQuart: function （x, t, b, c, d） {return c*（t/=d）*t*t*t + b;},easeOutQuart: function （x, t, b, c, d） {return -c * （（t=t/d-1）*t*t*t - 1） + b;},easeInOutQuart: function （x, t, b, c, d） {if （（t/=d/2） < 1） return c/2*t*t*t*t + b;return -c/2 * （（t-=2）*t*t*t - 2） + b;},easeInQuint: function （x, t, b, c, d） {return c*（t/=d）*t*t*t*t + b;},easeOutQuint: function （x, t, b, c, d） {return c*（（t=t/d-1）*t*t*t*t + 1） + b;},easeInOutQuint: function （x, t, b, c, d） {if （（t/=d/2） < 1） return c/2*t*t*t*t*t + b;return c/2*（（t-=2）*t*t*t*t + 2） + b;},easeInSine: function （x, t, b, c, d） {return -c * Math.cos（t/d * （Math.PI/2）） + c + b;},easeOutSine: function （x, t, b, c, d） {return c * Math.sin（t/d * （Math.PI/2）） + b;},easeInOutSine: function （x, t, b, c, d） {return -c/2 * （Math.cos（Math.PI*t/d） - 1） + b;},easeInExpo: function （x, t, b, c, d） {return （t==0） ? b : c * Math.pow（2, 10 * （t/d - 1）） + b;},easeOutExpo: function （x, t, b, c, d） {return （t==d） ? b+c : c * （-Math.pow（2, -10 * t/d） + 1） + b;},easeInOutExpo: function （x, t, b, c, d） {if （t==0） return b;if （t==d） return b+c;if （（t/=d/2） < 1） return c/2 * Math.pow（2, 10 * （t - 1）） + b;return c/2 * （-Math.pow（2, -10 * --t） + 2） + b;},easeInCirc: function （x, t, b, c, d） {return -c * （Math.sqrt（1 - （t/=d）*t） - 1） + b;},easeOutCirc: function （x, t, b, c, d） {return c * Math.sqrt（1 - （t=t/d-1）*t） + b;},easeInOutCirc: function （x, t, b, c, d） {if （（t/=d/2） < 1） return -c/2 * （Math.sqrt（1 - t*t） - 1） + b;return c/2 * （Math.sqrt（1 - （t-=2）*t） + 1） + b;},easeInElastic: function （x, t, b, c, d） {var s=1.70158;var p=0;var a=c;if （t==0） return b; if （（t/=d）==1） return b+c; if （！p） p=d*.3;if （a < Math.abs（c）） { a=c; var s=p/4; }else var s = p/（2*Math.PI） * Math.asin （c/a）;return -（a*Math.pow（2,10*（t-=1）） * Math.sin（ （t*d-s）*（2*Math.PI）/p ）） + b;},easeOutElastic: function （x, t, b, c, d） {var s=1.70158;var p=0;var a=c;if （t==0） return b; if （（t/=d）==1） return b+c; if （！p） p=d*.3;if （a < Math.abs（c）） { a=c; var s=p/4; }else var s = p/（2*Math.PI） * Math.asin （c/a）;return a*Math.pow（2,-10*t） * Math.sin（ （t*d-s）*（2*Math.PI）/p ） + c + b;},easeInOutElastic: function （x, t, b, c, d） {var s=1.70158;var p=0;var a=c;if （t==0） return b; if （（t/=d/2）==2） return b+c; if （！p） p=d*（.3*1.5）;if （a < Math.abs（c）） { a=c; var s=p/4; }else var s = p/（2*Math.PI） * Math.asin （c/a）;if （t < 1） return -.5*（a*Math.pow（2,10*（t-=1）） * Math.sin（ （t*d-s）*（2*Math.PI）/p ）） + b;return a*Math.pow（2,-10*（t-=1）） * Math.sin（ （t*d-s）*（2*Math.PI）/p ）*.5 + c + b;},easeInBack: function （x, t, b, c, d, s） {if （s == undefined） s = 1.70158;return c*（t/=d）*t*（（s+1）*t - s） + b;},easeOutBack: function （x, t, b, c, d, s） {if （s == undefined） s = 1.70158;return c*（（t=t/d-1）*t*（（s+1）*t + s） + 1） + b;},easeInOutBack: function （x, t, b, c, d, s） {if （s == undefined） s = 1.70158;if （（t/=d/2） < 1） return c/2*（t*t*（（（s*=（1.525））+1）*t - s）） + b;return c/2*（（t-=2）*t*（（（s*=（1.525））+1）*t + s） + 2） + b;},easeInBounce: function （x, t, b, c, d） {return c - jQuery.easing.easeOutBounce （x, d-t, 0, c, d） + b;},easeOutBounce: function （x, t, b, c, d） {if （（t/=d） < （1/2.75）） {return c*（7.5625*t*t） + b;} else if （t < （2/2.75）） {return c*（7.5625*（t-=（1.5/2.75））*t + .75） + b;} else if （t < （2.5/2.75）） {return c*（7.5625*（t-=（2.25/2.75））*t + .9375） + b;} else {return c*（7.5625*（t-=（2.625/2.75））*t + .984375） + b;}},easeInOutBounce: function （x, t, b, c, d） {if （t < d/2） return jQuery.easing.easeInBounce （x, t*2, 0, c, d） * .5 + b;return jQuery.easing.easeOutBounce （x, t*2-d, 0, c, d） * .5 + c*.5 + b;}}）;</script><script type="text/javascript">$（document）.ready（function（）{$（".sqare"）.click（function（）{$（this）.animate（{width:"100px",height:"100px"}, 500, "linear", function（） { $（this）.addClass（"circle-label-rotate"）;}）.addClass（"circle"）.html（"<div class="innertext">Bye</div>"）.animate（{"opacity":"0","margin-left":"510px"},1500,function（）{}）; $（this）.slideUp（{duration: "slow",easing: "easeOutBounce"}）;}）;}）;</script><style>.circle-label-rotate {-webkit-animation-name: rotateThis;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;}@-webkit-keyframes rotateThis {from {-webkit-transform:scale（1） rotate（0deg）;}to{-webkit-transform:scale（1） rotate（360deg）;}}.circle{border-radius: 50px;-moz-border-radius: 50px; -webkit-border-radius: 50px;height:100px;width:100px;background:#dedede;}.sqare{height:100px;width:500px;border:dashed 1px #000;margin-top:10px;}.innertext{padding:40px;}</style></head><body><div> <div height="125px" align="center"> </div></div> <div style="width:600px;margin:0 auto"><h4>请点击虚线方框</h4><div class="sqare"></div><div class="sqare">这个方框是可以被删除的</div><div class="sqare"></div><div class="sqare"></div><div class="sqare"></div></div></body></html>
希望本文所述对大家的jquery程序设计有所帮助。