无法为子元素的字体大小设置动画？

Question

So I have this menu that changes height when you scroll, now that works absolutely great. 所以我有这个菜单，它可以在您滚动时更改高度，现在效果非常好。 Only thing is, now I'm trying to animate the font-size so that the font will become smaller as well. 唯一的事情是，现在我正在尝试设置字体大小的动画，以使字体也变得更小。

I did some research on child selectors in jQuery ( $('parent > child') ), but when I applied this in my script this didn't work. 我对jQuery（ $('parent > child') ）中的子选择器进行了一些研究，但是当我在脚本中应用此选择器时，此方法不起作用。 Anyone has a solution? 有人有解决方案吗？

[HTML] [HTML]

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/header.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>

    <body>
        <div id="content_parent">
            <!-- Header -->
            <div id="header_parent">
                <table class="menuItems">
                    <td>Button</td>
                    <td>Button</td>
                    <td>Button</td>
                    <td>Button</td>
                    <td>Button</td>
                </table>
            </div>

            <!-- Body (homepage) -->
            <div id="body_parent">
                <h1>content-test</h1>
            </div>
        </div>

        <!-- Footer -->
        <div id="footer_parent">

        </div>

        <script src="js/animateheader.js"></script>
    </body>
</html>

[CSS] [CSS]

#content_parent {
    max-width:1250px;
    min-width:750px;
    min-height:100%;
    box-shadow:0 0 10px 2px rgb(180,180,180);
    -webkit-box-shadow:0 0 10px 2px rgb(180,180,180);
    -moz-box-shadow:0 0 10px 2px rgb(180,180,180);
}

#header_parent {
    position:fixed;
    right:0;
    left:0;
    margin-left:auto;
    margin-right:auto;
    max-width:1250px;
    min-width:750px;
    height:60px;
    background-color:rgb(50,50,50);
    box-shadow:-6px 0 rgba(0,0,0,0), 6px 0 rgba(0,0,0,0), 0 6px 4px -2px rgb(180,180,180);
    -webkit-box-shadow:-6px 0 rgba(0,0,0,0), 6px 0 rgba(0,0,0,0), 0 6px 4px -2px rgb(180,180,180);
    -moz-box-shadow:-6px 0 rgba(0,0,0,0), 6px 0 rgba(0,0,0,0), 0 6px 4px -2px rgb(180,180,180);
    border-bottom-left-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-bottom-left-radius:2px;
    border-bottom-right-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-bottom-right-radius:2px;
    border-top-left-radius:0;
    -webkit-border-top-left-radius:0;
    -moz-border-top-left-radius:0;
    border-top-right-radius:0;
    -webkit-border-top-right-radius:0;
    -moz-border-top-right-radius:0;
}

#body_parent {
    padding-top:60px;
    max-width:1250px;
    min-width:750px;
    background-color:rgb(245,245,245);
}

table.menuItems {
    width:100%;
    height:100%;
    border-collapse:collapse;
    border:0;
}

.menuItems td {
    width:20%;
    height:100%;
    text-align:center;
    color:rgb(230,230,230);
    font-family:Sansation;
    font-weight:bold;
    font-size:25px;
}

[JS] [JS]

$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > 0) {
        $('#header_parent').stop().animate({height: "40px"},50);
        $('#body_parent').stop().animate({paddingTop: "40px"},45);
        $('table.menuItems > td').stop().animate({fontSize: "18px"},50);
    }
    else {
        $('#header_parent').stop().animate({height: "60px"},50);
        $('#body_parent').stop().animate({paddingTop: "60px"},45);
        $('table.menuItems > td').stop().animate({fontSize: "25px"},50);
    }
});

Just for clearance, the jQuery lines with fontSize in it are the ones not functioning the way I want. 只是为了清楚起见，其中带有fontSize的jQuery行是那些不符合我想要的方式的行。

Here's a Fiddle 这是小提琴

Answer 1

Here an updated version of the jsfiddle : http://jsfiddle.net/52czbb73/1/ 这里是jsfiddle的更新版本： http : //jsfiddle.net/52czbb73/1/

Your selector was wrong 您的选择器有误

$('table.menuItems > tbody > tr > td').stop().animate({fontSize: "18px"},50);

I took the liberty to add the tr tag in your table. 我冒昧地将tr标记添加到您的表中。

        <div id="header_parent">
            <table class="menuItems">
                <tr>
                <td>Button</td>
                <td>Button</td>
                <td>Button</td>
                <td>Button</td>
                <td>Button</td>
                </tr>
            </table>
        </div>

By the way in google chrome you can get the CSS path from the Developer Tools by right clicking the element you want to target then select CSS path that copies the CSS path to the clipboard. 顺便说一下，在Google chrome中，您可以从开发人员工具中获取CSS路径，方法是右键单击要定位的元素，然后选择将CSS path复制到剪贴板的CSS路径。 Then paste it in your code. 然后将其粘贴到您的代码中。

Answer 2

You are using wrng selector, you can select your td s like this: 您正在使用wrng选择器，可以像这样选择td ：

$('table.menuItems td').stop().animate({fontSize: "25px"},50);

and 和

$('table.menuItems td').stop().animate({fontSize: "18px"},50);

Updated demo: http://jsfiddle.net/52czbb73/2/ 更新的演示： http : //jsfiddle.net/52czbb73/2/

无法为子元素的字体大小设置动画？

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-02-25 17:47:28

解决方案2
1 2015-02-25 17:51:01

无法为子元素的字体大小设置动画？

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-02-25 17:47:28

解决方案2 1 2015-02-25 17:51:01

解决方案1
2 已采纳 2015-02-25 17:47:28

解决方案2
1 2015-02-25 17:51:01