When it comes to browser support, what are your requirements? Animating back can be tricky since the original style needs to be known.
One approach is using the window.getComputedStyle method to fetch the element's styles and store them in an object array for animating back. Additional supporting functions may be necessary.
I have tested the code below in Chrome, IE 9, and FireFox 24 with satisfactory results. The effectiveness may vary based on the styles being used. However, it should generally work well for animations.
The styles and speed have been stored in variables for better organization. Check out the fiddle below:
$(document).ready(function(){
var aniCss = {"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fixed"};
var speed = 1000;
var props = getProps(aniCss);
var curCss = getStyles($("#1"), props);
$(window).scroll(function(){
if ($(window).scrollTop() >0) {
$("#1").animate(aniCss,speed);
}
else {
$("#1").stop(true,true).animate(curCss,speed);
}
});
function getProps(css) {
var props = [];
for (k in css) {
props.push(k);
}
return props;
}
function getStyles($ele, props) {
var compCss = getComputedStyle($ele[0]);
var styles = {};
for (var i = 0;i<props.length;i++) {
var name = props[i];
var prop = compCss.getPropertyValue(name);
if (prop != '') { styles[name]=prop;}
}
return styles;
}
});
Fiddle: http://jsfiddle.net/ajqQL/1/
Update: jQuery 1.9 introduced the ability to pass an array of properties to retrieve values. You can simplify the above code by utilizing the jQuery .css() method:
$(document).ready(function(){
var aniCss = {"color":"#efbe5c","font-size":"52pt", "top":"0", "position":"fixed"};
var speed = 400;
var props = getProps(aniCss);
var curCss = $('#1').css(props);
$(window).scroll(function(){
if ($(window).scrollTop() >0) {
$("#1").animate(aniCss,speed);
}
else {
$("#1").stop(true,true).animate(curCss,speed);
}
});
function getProps(css) {
var props = [];
for (k in css) {
props.push(k);
}
return props;
}
});
Fiddle: http://jsfiddle.net/NZq8D/1/