JSFiddle - React, Tailwind, and code Playground

by malamine_kebe

HTML

<div id="frame">
	<div id="top">top</div>
	<div id="middle">middle</div>
	<div id="bottom">bottom<br>bottom<br>bottom<br>bottom</div>
</div>

CSS

#frame{
		position: absolute;
		left:200px;
		border-style: solid;
		border-width: 1px;
		top:200px;
		width:200px;
		height:200px;
	}

	#middle{
		width:200px;
		height:200px;
		position: absolute;
		top:0px;
	}

	#top{
		display:none;
		background-color:red;
		width:100%;
	}

	#bottom{
		position:absolute;
		display:none;
		bottom:0px;
		background-color:red;
		width:100%;
	}

JavaScript

$(document).on('mouseenter mouseleave', '#frame', function( e ) {
	var el = $(this),
		h = el.height(),
		t = el.offset().top,
		mEnt = e.type == "mouseenter";
	if(mEnt == true){
		$('#top').stop().fadeIn(300);
		$('#bottom').stop().fadeIn(300);
		$('#middle').stop().animate({'top':'20px'});
		el.stop().animate({
			'height':h+$('#bottom').height()+20,
			'top':t-20
		});	
	}else{
		$('#top').stop().fadeOut(300);
		$('#bottom').stop().fadeOut(300);
		$('#middle').stop().animate({'top':'0px'});
		el.stop().animate({
			'height':200,
			'top':t+20
		});
	}
});