Skip to content Skip to sidebar Skip to footer

Moving A Div Left And Right Continously

I've been trying to get this javascript animation to work for hours now, and I got nothing. The problem isn't getting my div box to move from left to right(or from top to bottom),

Solution 1:

Code like this always works for me:

var boxWidth = 57, delta = 2;
setInterval(function(){
  var left = parseInt(box.style.left);
  if(left >= parseInt(viewDim.width - boxWidth)){
    delta = -2;
  }
  if (left <= 0) {
    delta = 2;
  }
  box.style.left = left + delta + 'px';
}, 20);

Solution 2:

Although you have your solution now, I couldn't help myself from making complete code here.

The bouncing box bounces around inside the parent element. Tested in IE8, FF3, and Opera11.

Solution 3:

This can give an idea, how to do it with jQuery

http://jsfiddle.net/rFkpy/

$('#myDiv').click(function() {
  $(this).animate({
    left: '+=250'
  }, 1500, "easeOutBounce", function() {
    // callBack
  });
});

Post a Comment for "Moving A Div Left And Right Continously"