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> |