jqueryui卡通一窥之jquery.ui.effect-transfer.js

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

(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);