.css vs .animate

.css vs .animate

Hi everyone,

my feeling tells me, that this is a rather simple question, which also may have been discussed several times, but still I wasn't able to find any suitable topic / answer.

As said, the problem is really simple. In short, the first line works as anticipated, the 2nd doesn't work at all (when in-/out-commenting is changed ;) )

$speech.animate({ fontSize: num + 'px' }, 'slow');
//$speech.css({fontSize: num + 'px' });


Help is very much appreciated. I hope I do not miss sth. very obvious.
Thx,
Capum

------------------------------------------

The full code snippet look like this (~form Learning jQuery 1.3)

<div id="switcher">
            <div class="label">Text Size</div>
            <button id="switcher-default">Default</button>
            <button id="switcher-large">Bigger</button>
            <button id="switcher-small">Smaller</button>
</div>
<div class="speech">
            <p>.....</p>
</div>


and this is my corresponding jQuery Part

$(document).ready(function() {
    var $speech = $('div.speech');
    var defaultSize = $speech.css('fontSize');
    $('#switcher button').click(function() {
        var num = parseFloat($speech.css('fontSize'));
        switch (this.id) {
            case 'switcher-large':
                num *= 1.4;
                break;
            case 'switcher-small':
                num /= 1.4;
                break;
            default:
                num = parseFloat(defaultSize);
        }
        //$speech.css({fontSize: num + 'px' });
        $speech.animate({ fontSize: num + 'px' }, 'slow');
    });
});