Although it may seem silly, as this is my profession, I am struggling with some nuances of CSS and JavaScript positioning and sizing.
I have a function that animates objects by changing their properties using an easing function. However, each time the animation progresses, a callback to resize a test div is called but the div remains unchanged. It seems like a simple issue, but I can't figure it out.
Here is a link to a fiddle showcasing the problem: http://jsfiddle.net/sd9tJ/
Below is a snippet of the code for reference:
$(document).ready(function() {
var surface = {w : 100, h : 100};
var $div = $('#test');
$t.animate(surface, {w : 200, h : 200}, 2000, $t.easing.linear, function() {
document.body.innerHTML += '('+Math.round(surface.w)+'/'+Math.round(surface.h)+')';
$div.css({
width : Math.round(surface.w) + 'px',
height : Math.round(surface.h) + 'px'
});
});
});
The values are correct, but the style doesn't update, leading me to believe it's a CSS-related issue.
Any insights or solutions would be greatly appreciated. Thank you!