Develop Reference

How to set the animation duration to match the page load time on the fly?

For example, I have a preloader div which is hidden with addClass on $(window).load() - fairly routine stuff.
Now, in addition to this I want to include a loading bar or similar with a css transition within the preloader - also fairly easy assuming I have a fixed duration that would hopefully accommodate the majority of load times.
The issue now is that I want the animation to complete every time, regardless of page load time - how do I set the animation duration to match the page load time on the fly?

For anyone looking for this the solution, as described by sideroxylon would be something along these lines:
// Kick off animation with long duration on doc ready
$(document).ready(function() {
$('#progress-bar > div').animate({'width':'100%'}, 40000);
});
// When the page has loaded clearQueue and stop the animation,
// then resume with much shorter duration to complete
$(window).load(function() {
$('#progress-bar > div').clearQueue().stop();
$('#progress-bar > div').animate({'width':'100%'}, 500);
});
Hope this is of use!

Refresh DIV before heavy computation

This keeps bugging me and although there's a lot of "Refresh DIV with jQuery" questions out there, none addresses (haven't found it, that is) this simple matter : how do I refresh (visual aspect) a DIV before doing some heavy lifting calculations? The idea is simple, I'm creating a big chart with D3 that takes a couple of seconds to generate and I want to be able to put an animated gif in overlay before computation and remove it after. Something like :
$("#test").empty();
$("#test").text("Should be seen while waiting");
for (var i=1;i<2000000000;i++) {
//Draw heavy SVG in #test that takes time
}
$("#test").empty();
$("#test").text("Ready");
$("#test").css("color", "red");
Simple, but I haven't been able to do it thus far : the "Should be seen while waiting" never appears :(
A simple Fiddle here demonstrates the behaviour : http://jsfiddle.net/StephMatte/q29Gy/
I tried using setTimeout and jQuery's .delay() in 3 different browsers, but to no avail.
Thanx for any input.

Try this-
box = $("<div>", {'id': 'box'});
$("#test").append(box);
$("#box").text("Should be seen while waiting");
for (var i=1;i<2000000000;i++) {
//Draw heavy SVG in #test that takes time
}
$("#box").remove();
$("#test").text("Ready");
$("#test").css("color", "red");`

It turns out I was simply using the wrong syntax with setTimeout().
This did the trick :
$("#test").text("Is seen while generating heavy SVG");
setTimeout(function(){build_chart();}, 100);
$("#test").empty();
10ms wasn't enough, but 100ms is enough for the DIV to show its new content before going into heay computation.

JavaScript/jQuery: Animated Cursor/Light Effect

Recently, I found an SVG with an animated cursor element (like the kind of cursor you see when you're typing text on a screen, like I am now). The JavaScript behind this basically switches the visibility of the target element between on and off. The "cursor" element was the only part of the SVG file that the JavaScript affected. I've found that it can target HTML document objects, too.
Here's the original JavaScript, with id="cursor" (#cursor) marking the target element:
var visible = true;
setInterval(function () {
document.querySelector('#cursor').style.opacity = visible ? 0 : 1;
visible = !visible;
}, 550);
What I want to do is alter this code to make it fade in and out. The resulting effect would be like this:
Fade in quickly (250 ms)
Stay visible for less than half a second (500 ms)
Fade out (250 ms)
Repeat 1.~3.
In other words, steps 1 through 3 would all take place in one second, every second.
The question I have about this is: how do I do this in either JavaScript or jQuery?
(P.S.: is there a jQuery equivalent to the above code?)

Using jQuery, you could do the following
setInterval(function () {
$("#cursor").fadeIn(500, function(){
$(this).fadeOut(500);
});
}, 1000);
Using an interval like you mentioned to start the fade in (utilizing jQuery functions). Passing a callback to fade back out. You can mess with the timing to fit your feel

css animation fast forward and rewind

I was wondering if it was possible, using some javascript or jquery, to skip to the next, or go to the last part of a css animation. Lets say we have the following:
#keyframe effect{
0%{opacity:1;}
45%{opacity:1;}
50%{opacity:0;}
95%{opacity:0;}
100%{opacity:1;}
}
that will fade something out and then back in
so lets say I made some buttons. How would I do the following:
$('#next').click(function(){
//skip to the next animation part
});
$('#previous').click(function(){
//skip to the previous animation part
});

It's not really possible unless you break the CSS into different parts based on classes and then add/remove classes.
However, there is an absolutely fantastic javascript library called Greensock, that allows timeline-based animation - and in many cases is faster than CSS animations. It also has the benefit of being cross-browser compatible.
If you were, for example to create something similar using Greensock, it would look something like this:
var effect = new TimelineMax({paused:true});
effect.addLabel('start');
effect.to(
'#myItem',
1,
{css:{opacity:1}}
);
effect.addLabel('step1');
effect.to(
'#myItem',
1,
{css:{opacity:0}}
);
effect.addLabel('end');
effect.play();
$('#gotoEnd').on('click', function(e){
e.preventDefault();
effect.seek('end');
});

With the use of the animation-play-state Property, you can pause an animation and update the transform, then restart it.
element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";
However you can't pause the animation, transform it, resume it, and expect it to run fluidly from the new transformed state.
At this time, there is no way to get the exact current "percentage completed" of a CSS keyframe animation. The best method to approximate it is using a setInterval or requestAnimationFrame.
This CSS tricks article explains this further, and gives an example of using setInterval. Another option is to use request animation frame
As mentioned GreenSock or Velocity are animation libraries which allow for extremely fast and smooth animations

JQuery animation: Is it possible to change speed during the animation?

I want to move a div down a page, and I want it to slow down as it reaches the target.
I tried using call back with recursive func but it doesn’t look smooth:
function MovePanel() {
sidePanel.animate({
"marginTop": newCurrTop
}, moveSpeed, function () {
MovePanel();
});
}
Is it possible to slow down an JQuery animation?
If not what are the alternatives?
Thanks.

The animate method takes a 3rd param called "easing"; learn about it here:
http://api.jquery.com/animate/

You might want to check this out: http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations
Easing can really bring life to an
effect. Easing controls how an
animation progresses over time by
manipulating its acceleration.