CODEWITHSUNDEEP
jqueryhtmlcssjquery-plugins
FluxEngine
FluxEngine

Reputation: 13280

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?

Upvotes: 0

Views: 322

Answers (4)

Alex
Alex

Reputation: 9031

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/

Upvotes: 1

Bosworth99
Bosworth99

Reputation: 4234

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.

Upvotes: 1

Bryan Weaver
Bryan Weaver

Reputation: 4473

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/

Upvotes: 1

Pointy
Pointy

Reputation: 413712

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).

Upvotes: 1

Related Questions