/ / jquery animuje rozmiar czcionki dla wszystkich dzieci - jquery, css, jquery-animate, dzieci

jquery animate rozmiar czcionki dla wszystkich dzieci - jquery, css, jquery-animate, children

Zostać określone Cóż, niech mają te linie kodu:

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

chcę stworzyć funkcję, która będziejednocześnie użyj metody .animate () biblioteki jquery animować rozmiar czcionki wszystkich elementów potomnych i rozmiar czcionki elementu nadrzędnego (#an) do 1.2 * current_font_size

Aby być bardziej zrozumiałym, piszę użycie funkcji do powyższego kodu

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

Jakieś sugestie?

Odpowiedzi:

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

0 dla odpowiedzi nr 2

Sprawdź poniższy kod.

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

Próbny: http://www.balam.in/personal/jquery-examples/animate-font.html