The problem occuring is because of this css block.
.template2 .articleHeadingInnerWrapper .articleHiddenContent {
color:white;
padding: 0 .5em .7em .5em;
}
The animation doesn't like the padding: 0 .5em .7em .5em;
With a couple css modifications to adjust the paddding on the overall element and not every element inside of the overall element, it should work fine.
Mod. #1
.template2 .articleHeadingInnerWrapper {
background: black;
/*set the background for title and hidden content*/
width:100%;
/* New padding! */
padding: .7em .5em;
}
Mod. #2
.template2 .articleHeadingInnerWrapper h3 {
text-transform: uppercase;
font-size: 1em;
line-height:1.1em;
font-weight:normal;
font-family:'texgyreadventor';
color: #FFF;
/* New padding! */
padding-bottom: .2em;
text-shadow: 0 0 1px white;
margin:0;
}
Mod. #3
.template2 .articleHeadingInnerWrapper .articleHiddenContent {
color:white;
/* Added display! */
/* Removed Padding! */
/*padding: 0 .5em .7em .5em;*/
}
I adjusted the js also, you only need to animate on the content that is hidden. The js block that was setting css was also removed, as you can do the same in css.
$('body').on('mouseenter', '.template2 article', function () {
$(this).find('.articleHiddenContent').animate({
height: 'show'
}, 500, function () {
// Animation complete.
});
}).on('mouseleave', '.template2 article', function () {
$(this).find('.articleHiddenContent').animate({
height: 'hide'
}, 500, function () {
// Animation complete.
});
});