首页 > Web开发 > 详细

jqueryui动画一窥之jquery.ui.effect-transfer.js

时间:2015-02-04 16:37:15      阅读:255      评论:0      收藏:0      [点我收藏+]
(function( $, undefined ) {   //-----闭包,熟了不能再熟了

$.effects.effect.transfer = function( o, done ) {
	var elem = $( this ),
		target = $( o.to ),                                //最终移到到的目标元素
		targetFixed = target.css( "position" ) === "fixed",
		body = $("body"),
		fixTop = targetFixed ? body.scrollTop() : 0,
		fixLeft = targetFixed ? body.scrollLeft() : 0,
		endPosition = target.offset(),
		animation = {
			top: endPosition.top - fixTop ,
			left: endPosition.left - fixLeft ,
			height: target.innerHeight(),
			width: target.innerWidth()
		},
		startPosition = elem.offset(),
		transfer = $( '<div class="ui-effects-transfer"></div>' )  //--------------构造动画元素
			.appendTo( document.body )
			.addClass( o.className )
			.css({
				top: startPosition.top - fixTop ,
				left: startPosition.left - fixLeft ,
				height: elem.innerHeight(),
				width: elem.innerWidth(),
				position: targetFixed ? "fixed" : "absolute"  //---------------定位
			})
			.animate( animation, o.duration, o.easing, function() {
				transfer.remove(); //--------------- 动画结束移除
				done();   //---动画完成
			});
};

})(jQuery);

jqueryui动画一窥之jquery.ui.effect-transfer.js

原文:http://blog.csdn.net/spy19881201/article/details/43486899

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!