To be specified Well let's have this lines of code:
<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>
i want to make a function which will simultaneously use .animate() method of jquery library to animate the font-size of all child elements and the font-size of the parent element (#an) to 1.2*current_font_size
To be more understandable i write the use of the function to the above code
<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>
Any suggestions?
$("#an, #an > *").animate({
fontSize: 1.2*parseFloat($("#an").css('font-size'))+"px"
},400);
Check the below code.
<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>
Demo: http://www.balam.in/personal/jquery-examples/animate-font.html
精彩评论