javascript 进出方形动画

Posted 2021-05-03

<div class="parent">
  Bla Bla Bla
  <div class="square"></div>
</div>

.parent {
	width: 10vw;
	height: 10vw;
	position: relative;
	overflow: hidden;
	border: 1px solid rgb(199, 88, 14);
}

.parent .square {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgb(199, 88, 14);
	top: 100%;
	left: 0;
	z-index: -1;
}

var duration = 200;

$('.parent').hover(function(e) {
	var square = $(this).find('.square');
	var edge = closestEdge(e.pageX, e.pageY, $(this).width(), $(this).height(), $(this).offset());
	
	if(edge == 'top') {
		$(square).stop(true).css({'top': '-100%', 'left': '0'});
		$(square).animate({
			top: 0
		}, duration);
	}
	
	if(edge == 'left') {
		$(square).stop(true).css({'top': '0', 'left': '-100%'});
		$(square).animate({
			left: 0
		}, duration);
	}
	
	if(edge == 'bottom') {
		$(square).stop(true).css({'top': '100%', 'left': '0'});
		$(square).animate({
			top: 0
		}, duration);
	}
	
	if(edge == 'right') {
		$(square).stop(true).css({'top': '0', 'left': '100%'});
		$(square).animate({
			left: 0
		}, duration);
	}
}, function(e) {
	var square = $(this).find('.square');
	var edge = closestEdge(e.pageX, e.pageY, $(this).width(), $(this).height(), $(this).offset());
	
	if(edge == 'top') {
		$(square).animate({
			top: '-100%'
		}, duration);
	}
	
	if(edge == 'left') {
		$(square).animate({
			left: '-100%'
		}, duration);
	}
	
	if(edge == 'bottom') {
		$(square).animate({
			top: '100%'
		}, duration);
	}
	
	if(edge == 'right') {
		$(square).animate({
			left: '100%'
		}, duration);
	}
});

function closestEdge(cursorX, cursorY, divWidth, divHeight, divOffset) {
	var cursorPosDivX = cursorX - divOffset.left;
	var cursorPosDivY = cursorY - divOffset.top;
	
	if(cursorPosDivX > cursorPosDivY) {			
		var distRight = cursorPosDivX / divWidth;
		var distTop = Math.abs((cursorPosDivY - divHeight) / divHeight);
		
		if(distTop > distRight) {
			return 'top';
		} else {
			return 'right';
		}
	} else {
		var distLeft = Math.abs((cursorPosDivX - divWidth) / divWidth);
		var distBottom = cursorPosDivY / divHeight;
		
		if(distBottom > distLeft) {
			return 'bottom';
		} else {
			return 'left';
		}
	}
}