вариант с animate ...
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#image {
opacity: 0;
width: 150px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function(e) {var a = null, d = e.fn.css; e.fn.css = function(b, i) {null===a&&(a = "undefined"!=typeof e.cssProps? e.cssProps: "undefined"!=typeof e.props? e.props: {}); if("undefined"==typeof a.transform&&("transform"==b||"object"==typeof b&&"undefined"!=typeof b.transform)) {var f = a, l; b: {l = this.get(0); for(var c =["transform", "WebkitTransform", "msTransform", "MozTransform", "OTransform"], j; j = c.shift();) {if("undefined"!=typeof l.style[j]) {l = j; break b}}l = "transform"}f.transform = l}if("transform"!=a.transform) {if("transform"==b) {if(b = a.transform, "undefined"==typeof i&&jQuery.style) {return jQuery.style(this.get(0), b)}}else {"object"==typeof b&&"undefined"!=typeof b.transform&&(b[a.transform] = b.transform, delete b.transform)}}return d.apply(this, arguments)}})(jQuery);
</script>
<script>
(function(j)
{function i(e) {var c = e.data("_ARS_data"); c||(c = {rotateUnits: "deg", scale: 1, rotate: 0}, e.data("_ARS_data", c)); return c}function d(e, c) {e.css("transform", "rotate("+c.rotate+c.rotateUnits+") scale("+c.scale+","+c.scale+")")}j.fn.rotate = function(e) {var c = j(this), f = i(c); if("undefined"==typeof e) {return f.rotate+f.rotateUnits}if(e = e.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/)) {e[3]&&(f.rotateUnits = e[3]), f.rotate = e[1], d(c, f)}return this}; j.fn.scale = function(e) {var c = j(this), f = i(c); if("undefined"==typeof e) {return f.scale}f.scale = e; d(c, f); return this};
var b = j.fx.prototype.cur; j.fx.prototype.cur = function() {return"rotate"==this.prop? parseFloat(j(this.elem).rotate()): "scale"==this.prop? parseFloat(j(this.elem).scale()): b.apply(this, arguments)}; j.fx.step.rotate = function(e) {var c = i(j(e.elem)); j(e.elem).rotate(e.now+c.rotateUnits)}; j.fx.step.scale = function(c) {j(c.elem).scale(c.now)};
var a = j.fn.animate; j.fn.animate = function(e) {if("undefined"!=typeof e.rotate) {var c, f = e.rotate.toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/); f&&f[5]&&(c = j(this), c = i(c), c.rotateUnits = f[5]); e.rotate = f[1]}return a.apply(this, arguments)}}
)(jQuery);
</script>
<script>
$(function () {
$('#image').animate({
"opacity": "1"
}, 1000).delay(500).animate({
"rotate": "-45"
}, 500).animate({
"marginTop": "300",
"width": "250"
}, 500);
});
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" id="image">
</body>
</html>