jQuery .animate() Issues

javascript jquery animation effects
Birk picture Birk · Jan 26, 2009 · Viewed 14.1k times · Source

I'm trying to make a autoscrolling/carousel like function for an unordered list of images.

When you mouse over the containing div its calling a function that's job is to animate the margin on the <ul>

$(".thumbs").animate({"margin-top": (currentMargin - 10) + "px"}, function(){
     console.log("margin-top" + (currentMargin - 10) + "px");
     running=false;
     });

I'm seeing the correct value for what I want in the log ie the animation thinks its finished... but nothing is changing on my div.

Does anyone have any insight as to what might make the animate function not work as intended?

Thanks

Answer

Ricardo Vega picture Ricardo Vega · Jan 26, 2009

try using "marginTop" instead of "margin-top". Normally when you use the CSS props as "border-something" or "margin-something" is better to use the "normalized" version of it, as you used to do it in DHTML (styles.marginTop).

Related questions

How to run two jQuery animations simultaneously?

Is it possible to run two animations on two different elements simultaneously? I need the opposite of this question Jquery queueing animations. I need to do something like this... $('#first').animate({ width: 200 }, 200); $('#second').animate({ width: 600 }, 200); but to run …

Read More
jQuery animated number counter from zero to value

I have created a script to animate a number from zero to it's value. Working jQuery Not Working I now want to run the script several times on the page for each matching class. Below is what I am trying …

Read More
Scroll smoothly to specific element on page

I want to have 4 buttons/links on the beginning of the page, and under them the content. On the buttons I put this code: <a href="#idElement1">Scroll to element 1</a> <a href="#idElement2">…

Read More