jquery - スナッピー Jquery アニメーション

Question

コード例: http://codepen.io/vincentccw/full/ncgka

マウスを入力するたびに非表示のコンテンツをスライドアップし、マウスを離すと非表示にしようとしていますが、アニメーションが期待どおりにスムーズにアニメーション化されないという問題があります。私はどこで間違ったのですか？

Answer 1

発生する問題は、この css ブロックが原因です。

.template2 .articleHeadingInnerWrapper .articleHiddenContent {
    color:white;
    padding: 0 .5em .7em .5em;
}

アニメーションは好きではありませんpadding: 0 .5em .7em .5em;

要素全体の内部のすべての要素ではなく、要素全体のパディングを調整するためのCSSのいくつかの変更により、正常に機能するはずです。

モッド。#1

.template2 .articleHeadingInnerWrapper {
    background: black;
    /*set the background for title and hidden content*/
    width:100%;

    /* New padding! */
    padding: .7em .5em;
}

モッド。#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;
}

モッド。#3

.template2 .articleHeadingInnerWrapper .articleHiddenContent {
    color:white;

    /* Added display! */

    /* Removed Padding! */
    /*padding: 0 .5em .7em .5em;*/
}

js も調整しました。非表示のコンテンツでのみアニメーション化する必要があります。css で同じことができるように、css を設定していた js ブロックも削除されました。

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

フィドルをチェックしてください。