jquery为所有孩子设置动画字体大小答案

【问题标题】：jquery animate font-size for all childrenjquery为所有孩子设置动画字体大小
【发布时间】：2011-11-09 18:28:18
【问题描述】：

待定好吧，让我们有这行代码：

<style type="text/css">
a{
font-size:20px;
}
</style>
<div id="an" style="font-size:14px">
    <a style="font-size:12px;">Bla bla bla</a>
    <p style="font-size:10px;">Bla bla bla</p>
    <a href="#">Bla bla bla</a>
    <!-- what ever goes here-->
</div>

我想创建一个同时使用 jquery 库的 .animate() 方法的函数将所有子元素的字体大小和父元素（#an）的字体大小设置为 1.2*current_font_size

为了更容易理解，我将函数的使用写到了上面的代码中

<style type="text/css">
a{
font-size:20px;
}
</style>
<div id="an" style="font-size:1.2*14px">
    <a style="font-size:1.2*12px;">Bla bla bla</a>
    <p style="font-size:1.2*10px;">Bla bla bla</p>
    <a style="font-size:1.2*20px" href="#">Bla bla bla</a>
    <!-- what ever goes here-->
</div>

有什么建议吗？

【问题讨论】：

您的 JavaScript 代码在哪里？通常，您不会来这里并期望我们从头开始编写您的整个函数。如果你还没有写任何东西，this is a good starting point.
我想做但我不知道怎么做.. 我知道做以下但我不想这样做！ new_size=1.2*parseFloat($("#an").css('font-size')); $("#an").animate({fontSize: new_size+"px"},400);
对不起，克里斯... Stackoverflow 是针对编程问题的... 如果您在编写函数时遇到困难，这里的人愿意提供帮助。大多数人不愿意免费从头开始编写整个函数。你必须从某个地方开始...http://www.impressivewebs.com/jquery-tutorial-for-beginners/。顺便说一句，为什么你不想这样做？这是您要求我们为您做的 JavaScript/jQuery！
因为这只会动画父字体大小如果任何孩子（例如）具有字体大小的内联css代码，这不会改变..
克里斯，您引用的 JS 代码和您最后的评论应该已经包含在您的原始问题中！这就是我的全部观点。

标签： jquery css jquery-animate children

【解决方案1】：

检查以下代码。

<div id="an">
    <a style="font-size:12px;">Bla bla bla</a>
    <p style="font-size:10px;">Bla bla bla</p>
    <a style="font-size:20px" href="#">Bla bla bla</a>
    <!-- what ever goes here-->
</div>

<script>
$(function(){
    $("#an").children().each(function(){
        fontSizeValue = parseInt($(this).css('font-size'))*1.2;
        $(this).animate({fontSize:fontSizeValue +"px"});
    })
});
</script>

演示：http://www.balam.in/personal/jquery-examples/animate-font.html

【讨论】：

【解决方案2】：

$("#an, #an > *").animate({
    fontSize: 1.2*parseFloat($("#an").css('font-size'))+"px"
 },400);

【讨论】：

thx gion.. 这个解决方案完全符合我的要求.. 最后一个问题.. 你有 $() 选择器的链接吗？我的意思是我想了解更多关于#an > * 或任何你可以用这种方法做的事情.. 再次感谢！
很好 jquery 依赖 css 选择器来匹配 dom 节点，所以你可以从 css 核心开始：w3.org/TR/css3-selectors，或者你可以阅读关于选择器的 jquery 文档：api.jquery.com/category/selectors。请注意，您可以组合大多数选择器来构建适合您需求的查询。