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!

Rapahel js : dynamic positioning and animations

I'm new to js and web dev in general, and i want to add animations to my website using raphael js.
Here is the code I use for a basic slide-in animation:
paper.text('1000','25%','this is a\ntest').animate({x: '50'}, 1000, 'linear');
(test it here)
It works fine when i put fixed values for the x parameter. However, when i use dynamic positioning, the animation doesn't occur, and the text waits for the duration of the animation before positioning itself. At least the final positioning is what i'm looking for:
paper.text('300%','25%','this is a\ntest').animate({x: '50%'}, 1000, 'linear');
Why isn't it working ?
Is there a way around ?

I'm not sure raph can work like that (animating to a percentage), I may be wrong though.
Is this the sort of thing you are after ?
paper.text( paper.width * 3,'25%','this is a\ntest').animate({x: paper.width / 2}, 1000, 'linear');

Easing on Fixed Position Jquery

Is there anyway to add a easing to a fixed element?, I've been looking around and I can't find an answer. I really don't know how it would be, maybe something like...
$(window).scroll(function() {
$("#form").animate({position:"fixed", easing: 'swing'});
});
Any help will be appreciated ^ ^ Thanks!
Edit:Pretty much what I'm looking for is when user scrolls, the fixed element obviously will follow the window position, but I want to add is a little delay in comparison to scroll action with an easing effect

You'd have to make that div absolute positioned, z-indexed and without parent, then move it on the scroll event. You can know the number of pixels scrolled with scrollTop(). Something like this:
$(window).scroll(function(){
var offset=100;
//stop is called so easing doesn't affect while it is still scrolling.
$("form").stop().animate({top:($(window).scrollTop()+offset)+"px"}, 300, 'swing');
});

Try this instead:
$("#form").animate({position:"fixed"}, 300, 'swing');

From the jQuery api ( http://api.jquery.com/animate/ ):
The only easing implementations in the jQuery library are the default,
called swing, and one that progresses at a constant pace, called
linear. More easing functions are available with the use of plug-ins,
most notably the jQuery UI suite.
$("form").animate({position:"fixed"}, 300, 'swing'); //swing being default

Making a width transition in jQuery

I have an image, and when it is hovered on, I would like its width to increase using jQuery. I know how to do that, but now I would like to make this a slower effect, maybe 500 milliseconds long, not instant.
I know that it should be pretty easy, I just don't know the syntax.
How can this be achieved?
This is my current script:
$("#example").width("250");
EDIT: I came across another problem. I created two scripts, one for making the image larger and one for making it smaller. However, the script seems pretty buggy and unsmooth, and switches back and forth between big and small without reason. I am resizing it using onmouseover and onmouseout.
//Bigger
$("#example").animate({width: 250}, 200 );
//Smaller
$("#example").animate({width: 200}, 200 );

This should be what your looking for, it will animate the width of the example div out to 250px at a speed of 500 miliseconds
$("#example").animate({width: 250}, 500 );
Hope that helps
EDIT: With regards to your updated question: http://jsfiddle.net/Hfs7L/2/

$("#example").stop().animate({width:250}, 500); // bigger
$("#example").stop().animate({width:200}, 500); // smaller
using jQuery .animate() and .stop()

Regarding your updated problem:
Try and get the animations out of the animation queue, so it doesn't have to finish before it can start a new animation:
//Bigger
$("#example").stop(true, true).animate({width: 250}, 200 );
//Smaller
$("#example").stop(true, true).animate({width: 200}, 200 );

$("#example").animate({width:'250'}, 500);

jQuery example (in jsfiddle) working in firefox but not in IE8, 7

Why this example not working in IE http://jsfiddle.net/8RZVt/
I'm getting this error in IE8.
Message: Invalid argument.
Line: 156
Char: 295
Code: 0
URI: http://code.jquery.com/jquery-1.4.4.min.js

According to jQuery, this is because, as stated on the animate documentation page:
All animated properties should be a
single numeric value (except as noted
below); properties that are
non-numeric cannot be animated using
basic jQuery functionality....
So, in fact, in Firefox you are using undefined behavior. The correct thing to do would be to animate on backgroundPositionX, however Firefox does not support this.
There is, however, a jQuery plugin that does what you want:
http://plugins.jquery.com/project/backgroundPosition-Effect
Update
On closer inspection, the plugin does not support += or -= formats.
I hacked it into this example:
http://jsfiddle.net/CxqSs/ (See new example at bottom.)
Could definitely use some cleanup, and should probably be added to that plug-in, but it works in both browsers and doesn't rely on undefined behavior.
BTW, I don't know if it's worth noting, but if you leave this animation running a long time, it will eventually overflow the value and break. This could be overcome by animating the full length of the background image and then resetting the offset to 0px in the callback before the next animate. This would also avoid needing the += format.
Also,
It should be noted that speed: 1, step: 1 and speed: 50, step: 50 are equivalent.
The reason they look different speeds is because
There is more overhead in a speed of 1 (which is really a millisecond duration) because animate gets called more often.
The default easing is "swing", meaning that the animation speeds up and slows down slightly throughout it's course, meaning that the overall speed is affected a bit. You should change the easing to "linear" for your scrolling case:
var animate = function() {
element.animate({
...
}, speed, "linear", animate);
};
This means that you could use the backgroundPosition-Effect plugin, without the '+=', by setting your step to 2247 (the width of the image), like I stated above.
And that finally brings us to... wait for it...
http://jsfiddle.net/zyQj3/20/
Cross-platform, non-kludgy, non-overflowing, correctly easing, extra parameter-lacking, solution.

The script fails at this point because you are passing an invalid CSS value:
element.animate({
backgroundPosition: animStep + " 0px" /* evaluates to "+=50px 0px" */
}, speed, animate);

OK here we go again :D
http://jsfiddle.net/c7rKV/1/
Again identical to original however again just animating backgroundPositionX when in IE.
Apologies on not actually looking at FF/Chrome last time.
Additionally: this of course is not very graceful and Adam Prax is absolutely correct on what the problem is. I just wanted to post a solution to it.

If you check the source code of jQuery, you will see it uses this regexp to parse the parameter (which in your case is +=50px 0px). So it will see it as += (increase) 50 (to fifty) px 0px (unit, append after the number). When trying to read the current value, jQuery uses parseFloat, which just grabs the number at the start of the string. So it works perfectly, even if a multi-dimensional property is probably not what the jQuery programmers had in mind.
Except that IE8 does not support getting the current value of background-position. There is background-position-x and background-position-y but no background-position. Duh. So your best bet is checking the browser type, and animating either background-position or background-position-x depending on that: http://jsfiddle.net/22UWW/
(There is actually a jQuery bug report about this, with a more elegant solution.)