.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');
});
});