JQuery анимировать размер шрифта для всех детей - PullRequest
Новая
       7

JQuery анимировать размер шрифта для всех детей

1 голос
/ 03 сентября 2011

уточняется Ну, давайте иметь следующие строки кода: 

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

Я хочу создать функцию, которая будет одновременно использовать метод .animate () библиотеки jquery. анимировать размер шрифта всех дочерних элементов и размер шрифта родительского элемента (#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>

Есть предложения?

Ответы [ 2 ]

3 голосов
/ 03 сентября 2011 
$("#an, #an > *").animate({
    fontSize: 1.2*parseFloat($("#an").css('font-size'))+"px"
 },400);
0 голосов
/ 03 сентября 2011

Проверьте код ниже. 

<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

...