I'm struggling to implement smooth animations on this box. I've tried using 'switchClass' but can't seem to keep everything together. Any help would be greatly appreciated. Here is the code snippet for reference:
<script src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<style>
#box {
position: relative;
margin: auto;
padding: auto;
display: block;
width: 167px;
height: 167px;
}
#box .item {
position: relative;
margin: 0;
display: block;
width: 100%;
height: 33%;
cursor: pointer;
}
#box .over {
height: 84%;
}
#box .other {
height: 8%;
}
#top {
background: red;
}
#mid {
background: green;
}
#bot {
background: blue;
}
</style>
<script>
function animateBox(item) {
$('.item').attr('class', 'item other');
$('#' + item.id).attr('class', 'item over');
}
function resetBox() {
$('.item').attr('class', 'item');
}
</script>
<div id='box' onmouseout="resetBox()">
<div id='top' class='item' onmouseover='animateBox(this)'></div>
<div id='mid' class='item' onmouseover='animateBox(this)'></div>
<div id='bot' class='item' onmouseover='animateBox(this)'></div>
</div>
edit: The code is functioning correctly, however, some additional animations are needed to enhance the final output.