0

代码示例： http ://codepen.io/vincentccw/full/ncgka

我试图在鼠标输入时向上滑动隐藏的内容，并在鼠标退出时隐藏它，但问题是动画的动画效果不如预期的那么流畅。我哪里做错了？

4

1 回答 1

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

看看小提琴。

于 2013-10-27T15:22:52.720 回答