How I can move DOM elements slowly?

Question

How I can move DOM elements slowly? This does not work

 for ( var a = 0 ; a < 100 ; a++){

    $('*').each(function(){

      if ( ! /HTML/.test($(this).context.nodeName))
      {
        var top =  parseInt($(this).css('top')) + 1;

        $(this).css('top',top + "px");
      }

    });
  }

Elements are positioned when the loop finish

How can I do this slowly?

Sorry for my English

Answer 1

try jquery's $.animate()

it requires you to set a target position to move to, rather than continuous movement

or using setInterval :

intervalInMilliseconds=17;//60 frames per second
var interval = setInterval(function()
{
for ( var a = 0 ; a < 100 ; a++){

    $('*').each(function(){

      if ( ! /HTML/.test($(this).context.nodeName))
      {
        var top =  parseInt($(this).css('top')) + 1;

        $(this).css('top',top + "px");
      }

    });
  }
},intervalInMilliseconds);

stop when you're done by doing this:

clearInterval(interval)

Answer 2

Or in pure javascript, you should use a timer

var $elem = $(this), // jquery object
    elem = $elem[0], // dom element
    currentPos = $elem.offset().top, // current position
    targetPos = currentPosition + 100, // target position
    timer = setInterval (function () { // timer to move element slowly
        currentPos++;
        $elem.css('top',currentPosition + "px");
        if (currentPos == targetPos)
            clearInterval(timer);
    }, 100);

Answer 3

如果您要定位足够新的浏览器版本，则可以使用CSS动画 。