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修改来调整整个元素上的paddding而不是整个元素中的每个元素，它应该可以正常工作。

国防部。＃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的js块也被删除了，因为你可以在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.

Snappy Jquery动画

1 个答案: