How to do it

1. In the document.ready() function of the jQuery script block, retrieve the original font size of the Label:

var origFontSize = parseFloat($(".enlarge").css('font-size'

_ The parseFloat() function takes in an input string and returns the first floating point value in the string. It discards any content after the floating point value. For example, if the css property returns 12.5 px, then the function will discard the px.

2. Define the hover event of the containing fieldset element:

3. In the mouseenter event handler of the hover method, update the cursor style to pointer: function() {

$(".enlarge").css("cursor", "pointer");

4. Calculate the maximum font size that we want to animate to. In this example, we will set the maximum size to thrice the original:

var newFontSize = origFontSize * 3;

5. Animate the fontSize css property of the Label in 300 ms:

$(".enlarge").animate({ fontSize: newFontSize }, 300); },

6. In the mouseleave event handler of the hover method, animate the fontSize to the original value in 300 ms as shown:

$(".enlarge").animate({ fontSize: origFontSize }, 300); }

Thus, the complete jQuery solution is as follows:

<script language="javascript" type="text/javascript"> $(document).ready(function() {

var origFontSize = parseFloat($(".enlarge").css('font-

$(".enlarge") .ess ("cursor", "pointer"); var newFontSize = origFontSize * 3;

$(".enlarge").animate({ fontSize: newFontSize }, 300)

$(".enlarge").animate({ fontSize: origFontSize },


Run the web form. Mouseover on the fieldset area. The text size will animate over the stated duration and change to the maximum specified font size as displayed In the following screenshot:

On removing the mouse from the fieldset area, the text size will return back to the original.

0 0

Post a comment