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

Posted 2023-05-08

【中文标题】jQuery在更改CSS高度属性时添加动画

【英文标题】：jQuery add animation when change CSS height property

【发布时间】：2013-06-11 13:25:35

【问题描述】：

希望大家过得愉快

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

【参考方案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');
            );