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

【问题标题】：jQuery add animation when change CSS height propertyjQuery在更改CSS高度属性时添加动画
【发布时间】：2023-03-08 16:50:01
【问题描述】：

希望大家过得愉快

我想为那段代码添加动画。我尝试使用 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/

【问题讨论】：

jQuery 只对实际数字进行动画处理，它不理解“自动”，如果这是你尝试的动画？
如果您要设置动画效果，可以使用 CSS3 转换来自动设置动画
jsfiddle.net/Gbspx/16

标签： jquery css jquery-animate

【解决方案1】：

您可以使用一些 CSS3 过渡来非常轻松流畅地完成此操作。用这个切换你当前的 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;
}

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

$('#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 的浏览器。

【讨论】：

没错，我试过这个，但问题是我想要将高度设置为“自动”而不是具有特定高度。

【解决方案2】：

看看.slideToggle()，我想这就是你要找的。p>

【讨论】：

没错！！兄弟，你真棒！

【解决方案3】：

我找到了一个很好的解决方案，我仍然可以使用自动... 对我来说 auto 非常重要，尤其是当使用按钮使多个 div 出现时

解决办法是：

$('#lm_more').click(function(event){
    event.preventDefault();
    if($('#description_wrapper').css('height') != '0px') {
        $('#description_wrapper').animate({'height': '0px'}, 1000, "easeInQuint");
        $('#lm_more').html('Learn More');
    }
    else {
        var height_div = $('#description_wrapper').css({'height': 'auto'}).height();
        $('#description_wrapper').animate({'height': height_div}, 1000, "easeInQuint");
        $('#lm_more').html('Learn less');
    }
});

我首先让它计算所需的高度，然后将它传递给 animate 函数。

谢谢大家

【讨论】：

【解决方案4】：

这可以向上滑动，但就像第一个答案一样，您应该使用 slidetoggle。这是一个更好的选择。或者做addClass。

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

【讨论】：

【解决方案5】：

试试这个：

$('#lm_more').click(function (event) {
        event.preventDefault();
        $('#description_wrapper').slideToggle('slow', function (){
            if ($('#lm_more').text() == 'Learn more') {
                $('#lm_more').text('Learn less');
            } else {
                $('#lm_more').text('Learn more');
            }
        });
    });

【讨论】：

【解决方案6】：

我添加了很好的解决方案。在这里您可以找到内容的动态高度，然后在按钮单击和窗口调整大小事件上添加具有过渡效果的高度。

$(document).ready(function() {
            var divheight = document.getElementById('experience-county-toggle').offsetHeight;
            $("#experience-county-toggle").css('height', 0);
            $(".toggle-arrow-icon").click(function() {

                $(window).resize(function() {
                    $("#experience-county-toggle").removeClass('height-zero');
                    $("#experience-county-toggle").animate({
                        height: divheight
                    }, 1);
                    var $heightfirst = $('#experience-county-toggle').height();
                    if ($heightfirst > 0) {
                        $("#experience-county-toggle").addClass('height-zero');

                    }

                });
                $(window).trigger('resize');
            });

【讨论】：