JQuery动画字体大小不动画答案

【问题标题】：JQuery animating font-size not animatingJQuery动画字体大小不动画
【发布时间】：2015-07-04 22:05:40
【问题描述】：

我正在尝试为 div 的字体大小设置动画，将其减小到 0px。这是我的尝试： http://jsfiddle.net/corington/15gw9Lxq/1/

HTML：

<button id="roll">Go</button>
<div id="screen">
    <div id="rolled" class="vert">12</div>
</div>

CSS：

.vert {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#screen {
    display:none;
    position:fixed;
    padding:0;
    margin:0;
    top:0;
    left:0;
    z-index: 100;
    width: 100%;
    height: 100%;

}
#rolled {
    font-size: 150px;
    text-align: center; 
    color:#ccc;
    font-weight:bold;
}

脚本：

$("#roll").click(function(){
    // display rolled
    $("#screen").css("display", "block");
        // animate rolled
    var poscss = "{'fontSize' : '0px'};";
    $("#rolled").animate(       
        poscss, 
        "slow",
        "swing",
        function() {
            $("#screen").css("display", "none");
        }
    );  
});

似乎可以正常调用 animate 函数，但没有任何反应。有小费吗？谢谢科林

【问题讨论】：

标签： jquery css animation

【解决方案1】：

你正在传递一个字符串，而它应该是一个普通的对象：

.animate(properties [, duration ] [, easing ] [, complete ] )

properties 类型：PlainObject CSS 属性和值的对象动画将朝哪个方向移动。

var poscss = {'font-size' : 0}; // 0 instead of '0px' which doesn't make sense, 0 is always 0, unregarding unit

-DEMO-

【讨论】：