jQueryのanimateを使い基準点を中心として拡大

by s_hiroshi

HTML

<div class="block effect">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        A aut, esse illum iste non placeat quae quas temporibus vel velit.
        Autem doloremque impedit nesciunt provident quaerat
        sit ut vel voluptatem?
	</p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        A aut, esse illum iste non placeat quae quas temporibus vel velit.
        Autem doloremque impedit nesciunt provident quaerat
        sit ut vel voluptatem?
	</p>
    <div class="fig"></div>
</div>

CSS

.fig {
    display: none;
}

JavaScript

jQuery( function ( $ ) {

	/* エフェクト */
	$( ".effect" ).bind( "mouseenter", function () {
		var fig, initialPos, currentPos;
        fig = $( this ).children( ".fig" );
		fig.css( {
			margin: "0 auto",
			width: "100%",
			height: "100%",
			background: "#efefef"
		} );
		center( fig );
		initialPos = {
			"width": fig.width(),
			"height": fig.height()
		};
		fig.show().animate( {
			width: "60%",
			height: "60%"
		}, {
			duration: "500",
			easing: "swing",
			step: function () {
				currentPos = {
					"width": $( this ).width(),
					"height": $( this ).height()
				};
				$( this ).css( {
					"left": (initialPos.width - currentPos.width) / 2,
					"top": (initialPos.height - currentPos.height) / 2
				} )
			}
		} );
		return false;
	} );

	/* 中央配置 */
	function center( elem ) {
		var width, height, parentWidth, parentHeight, parentCssPos, offsetX, offsetY;

		elem = (elem instanceof jQuery) ? elem : $( elem );

		width = elem.width();
		height = elem.height();

		/* 要素親のサイズとpositionプロパティ設定 */
		if ( elem.parent().get( 0 ) === $( 'body' ).get( 0 ) ) {
			/* 親要素がbody */
			parentWidth = $( window ).width();
			parentHeight = $( window ).height();
		} else {
			/* 親要素がbody以外 */
			parentWidth = elem.parent().width();
			parentHeight = elem.parent().height();
			parentCssPos = elem.parent().css( 'position' );
			if ( (parentCssPos !== 'absolute') && (parentCssPos !== 'relative') ) {
				elem.parent().css( {
					position: 'relative'
				} );
			}

		}
		/* オフセット */
		offsetX = (parentWidth - width) / 2;
		offsetY = (parentHeight - height) / 2;
		elem.css( {
			position: 'absolute',
			top: offsetY,
			left: offsetX
		} );
	}
} );