Snappy Jquery animation

Question

Code example: http://codepen.io/vincentccw/full/ncgka

I'm trying to slide up a hidden content whenever I mouseenter and hide it when mouseout, but the problem is that the animation doesn't animate as smooth as expected. Where did I do wrong?

Answer 1

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.
    });
});

Check out the fiddle.