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;
}

此外，您需要为高度指定高度而不是“自动”才能使转换生效。

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

Answer 2

看看.slideToggle()，我认为这就是你要找的东西。

Answer 3

这可以向上滑动，但像第一个答案一样，你应该使用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');
    }
});

Answer 4

我找到了一个非常好的解决方案，我仍然可以使用自动... 对我来说，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');
    }
});

我首先要计算所需的高度，然后将其传递给动画函数。

谢谢大家

Answer 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');
            }
        });
    });

Answer 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');
            });

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

6 个答案: