Couldn't assign 'top' from variable in jQuery Animate

Question

Hi,

I am stuck here, i am trying to animate number of 'x' divs (the code below is just for one div) by selecting their original 'top' position & adding some 'newTop' pixel values to them.

        var dur = 1500;
        var origTop = $("#div_x").position().top;
        var newTop = parseInt(origTop) + 30;
        $("#div_x").animate({
            top : newTop + "px"
        },
        dur);

I checked alerting the 'newTop' variable and it's showing correct values but the animation is not working. I tried different variants to assign 'top' to the animate function but nothing is working.

any suggestion would help me a lot. thanks in advance.

Answer 1

just an advice, you can

var dur = 1500;    
    $("#div_x").animate({
        top : "+=30"
 },dur);

Answer 2

To act on more than one element, use specific selectors

For Instance, to animate all the div's on your site just select by

$('div').animate({
    top: '+=30'
}, 2000);

If you know which div's you want to animate, define/assign a specific classname and only select those classes.

Answer 3

Thanks but i was in need of selecting multiple divs & assign random 'newTop' values to their top position (newTop would be a random value for each divs)

i did it this way:

 var initialPosition = 3000;
  var dur = 1500;  
  var origTop = $("#div_"+d).position().top;  
  var newTop = Math.abs(parseInt(origTop) + initialPosition) + "px";
  $("#div_"+d).unbind('mouseover').unbind('mouseout').animate({
       top : newTop
  }, dur }

Going through it for hours i noticed problem was with my origTop value, selected from the div. It was negative (-3050) initially & i think that was the reason simply adding +30 didn't show animation.

Thanks a lot for your replies.