Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animating marginLeft with jQuery

Tags:

I can't figure out to animate marginLeft with jQuery. I need it to subtract 938px every time a user clicks on a link, which was working fine when I was using .css(), but I can't figure out how to make it work with .animate().

$("#full-wrapper #full").animate({     marginLeft, -=938px }, 500); 

Can anyone figure out why this doesn't work? This was my CSS version:

$("#full-wrapper #full").css("marginLeft","-=938px"); 

I was using CSS3 for animation, but need to make it work in older browsers.

like image 756
JacobTheDev Avatar asked Feb 10 '12 15:02

JacobTheDev


People also ask

How to animate CSS in jQuery?

The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").

How to apply animation in jQuery?

jQuery Animations - The animate() Method The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);

What is the user of the animate() method in jQuery?

The animate() is an inbuilt method in jQuery which is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the animated effect for the selected element. Syntax: (selector).

What is animate JavaScript?

JavaScript animations are done by programming gradual changes in an element's style. The changes are called by a timer. When the timer interval is small, the animation looks continuous.


2 Answers

There's a syntax error in your code, as you are passing parameters in an object to animate() you should use : not , to delimit each attribute. Try this:

$("#full-wrapper #full").animate({     marginLeft: '-=938px' }, 500); 

Example fiddle

like image 58
Rory McCrossan Avatar answered Sep 23 '22 03:09

Rory McCrossan


Replace comman(,) by colon(:).

$("#full-wrapper #full").animate({     marginLeft: "-=938px" }, 500); 
like image 42
ShankarSangoli Avatar answered Sep 25 '22 03:09

ShankarSangoli