jQuery 在更改 CSS 高度属性时添加动画

Question

希望大家都过得愉快

我想为那段代码添加动画。我尝试使用 animate() 。但它没有用，可能是因为我对 javascript 的了解不足。

请告诉我这段代码是否可行，或者我是否需要尝试其他方法？你有什么建议？

非常感谢您。

这是 HTML 代码:

<div id="description_wrapper">
    Text content.<br/>
    See; More Text content.
</div>

<button class="learn_more" id="lm_more" href="#">Learn more</button>

CSS

#description_wrapper
{
    margin: 0 auto;
    margin-top: 25px;
    height: 0;
    overflow: hidden;
}

jQuery

$('#lm_more').click(function(event){
    event.preventDefault();
    if($('#description_wrapper').css('height') > '1px') {
        $('#description_wrapper').css({'height': '0px'});
        $('#lm_more').html('Learn More');
    }
    else
    {
        $('#description_wrapper').css({'height': 'auto'});
        $('#lm_more').html('Learn less');
    }
});

在这里查看代码 http://jsfiddle.net/Gbspx/11/

Answer 1

您可以使用一些 CSS3 Transitions 轻松顺利地完成此操作。用这个切换你当前的 CSS:

#description_wrapper
{
margin-top: 25px;
height: 0;
overflow: hidden;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}

此外，您需要为高度指定高度而不是“auto”才能使过渡生效。

$('#lm_more').click(function(event){
event.preventDefault();
if($('#description_wrapper').css('height') > '1px') {
    $('#description_wrapper').css({'height': '0px'});
    $('#lm_more').html('Learn More');
}
else {
    $('#description_wrapper').css({'height': '200'});
    $('#lm_more').html('Learn less');
}

});

JS Fiddle

请注意，这仅适用于支持 CSS3 的浏览器。