optron,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#popup {
width: 200px;
border: 1px solid #999;
}
.on {
border-bottom: 1px solid #999;
height: 30px;
}
</style>
</head>
<body>
<div id="popup">
<div class="on">Блок #1</div>
<div class="on">Блок #2</div>
<div class="on">Блок #3</div>
<div class="on">Блок #4</div>
<div class="on">Блок #5</div>
<div class="on">Блок #6</div>
<div class="on">Блок #7</div>
<div class="on">Блок #8</div>
<div class="on">Блок #9</div>
<div class="on">Блок #10</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var speedto = 600,speedout = 300,
originalHeight = 30,
hoverHeight = 50,
pause = 350;
function to() {
$(this).stop().delay(pause).animate({ height: hoverHeight }, speedto);
}
function out() {
$(this).stop(true,true).animate({ height: originalHeight }, speedout);
}
$(".on").on({mouseenter : to, mouseleave : out});
</script>
</body>
</html>