How to animate scrollTop to an offset, when it is animating a font resize concurrently, changing the offset value
I've managed to create a zoom and scroll effect but it breaks if I have them run concurrently. When clicking on an element it is meant to zoom in scale with that element's depth (this works), and then scroll the page so that the top of the element is at the top of the viewport. This only works if I click on elements of equal depth to the current one, as the value of the offset is no longer valid after all the elements have been zoomed.
Interrupting the process with an alert allows correct behaviour to occur, as it allows the value to 'catch up'.
Here's the code I'm using:
- (t = $("#contents .chapter")).click(zoomadjust = function(evt) {
- if(this != zoomednode) {
- var zoom, depth, t;
- if(!zoomednode)
- zoomednode = $(this).parents("ul")[0];
- t = depth = $(this).parents("ul").length;
- zoom = 130;
- while(--t > 0)
- zoomnum = (zoom *= 1.15);
- zoom += '%';
- depth -= $(zoomednode).parents("ul").length;
- if(depth < 0)
- depth *= -1;
- zoomednode = this;
- $("#contents").animate(
- { fontSize: zoom,
- },
- {duration: 45+45*depth, queue: false }, 0, 0
- );
- $("html, body").animate(
- { scrollTop: $(zoomednode).offset().top, {duration: 45+45*depth, queue: false });
- }
- })
I've tried predicting the value by scaling it up, but it doesn't seem to help.
EDIT: Wonder if lambda expressions can do what I'm seeking, let's have a look...
UPDATE: Nope, didn't work. I tried
- $("html, body").animate(
- { scrollTop: function() { return $(zoomednode).offset().top } }, {duration: 45+45*depth, queue: false });
in the hope that it would always use the most up-to-date value each time it is referenced, but it seems that isn't supported...