5

我希望你们都有一个美好的一天

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

4

6 回答 6

7

您可以使用一些 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小提琴

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

于 2013-06-14T20:19:59.263 回答
3

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

于 2013-06-14T19:53:12.777 回答
3

我找到了一个很好的解决方案，而且我仍然可以使用 auto... 对我来说 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 函数。

谢谢你们

于 2013-06-15T03:52:33.660 回答
2

这可以向上滑动，但就像第一个答案一样，您应该使用 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');
    }
});
于 2013-06-14T21:18:44.513 回答
1

尝试这个：

$('#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');
            }
        });
    });
于 2013-06-14T20:02:37.250 回答
1

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

$(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');
            });
于 2018-10-29T10:12:50.090 回答