animating with .animate() jquery

I have a logo/header in a css

#logo2 {padding:43px 20px 0 20px; background:url(images/in_Store_Marketing.jpg) top right no-repeat;}

I am trying to use .animate() in jquery to make the logo come from the right side of the screen and settle in on 开发者_运维技巧the left side of the screen. Using the css above, it sets the image on the left side, where it should be at the end of animation.

currently the jquery looks like this

$(document).ready(function(){
     $('#logo2').animate(
     { right: "+=95%" }, 3000 );
});

HTML looks like this

<div id="logo2" style="height:70px">

it currently does nothing, no animation... what am I missing? How would you get this to work do animate in such a way?

try this?

.logo {padding: 35px 15 px 0 15 px; background:url(images/Logo.jpg) top right no-repeat;}

Notice i changed left to right

and change the js to:

$(document).ready(function(){ $('#alex').animate({ right: "+=95%" }, 3000); });

I've coded a similar example for you in jsfiddle, check it out

UPDATE:

Try my update, it uses a absolutly positioned image, that will give the same effect as a background image:

http://jsfiddle.net/tub3c/

You're animating "left", but you really need to animate "background-position". However, as that's not one of the basic sort of properties that jQuery can directly animate, it may be necessary to also load jQueryUI, and even it may not be able to animate "background-position" (the problem being that it's a weird two-valued property).

i think left needs to be in quotes:

$(".logo").animate({"left": "+=400px"}, 3000);

Also, animate() edits position and you do not have any position set and as far as I know it only moves elements not objects inside elements.

if you look at this fiddle I changed your css a little to add the positioning and I wrapped the "logo" in a div which the animation is applied to.

hope this helps. http://jsfiddle.net/aMaaC/1/

An elements "position" property must be set to something other than "static" for placement properties like "top" or "left" to have any effect (note that position defaults to "static" unless defined otherwise - which is whats causing the OPs issues). So: absolute, relative, and maybe fixed (not positive on that one). Also - jquery will definitely animate "background-position", but only one parameter, and not two ( "-30px", and not "-30px 10px"). In jQ 1.4, you could animate both parts, but its been "fixed" in 1.5. Kinda sadly.