Move Image with JavaScript

What it can't do? Well, I was talking about jQuery. It is a tremendous library. CSS wasn't able to create complex animations at some point, and then jQuery appeared to help it out. jQuery created a wrapper method, called animate(). It can apply custom animation to the elements in the set. It provides a set of CSS style properties that they can reach the end of the animation. By the way, only numeric values are allowed to be animated, such as left: "+=350" in our case. String values cannot be animated like background-color: black, except for the strings "show", "hide" and "toggle". These values only allow hiding and showing the animated element. There is a working example below_

Explore the Blog...

Below is the script used for this animation. By the way, "+=" and "-=" used for relative animations_

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
  moveToRight();
  function moveToRight(){
    $("#arrowI").animate({left: "+=350"}, 6000, moveToLeft)
  } 
  function moveToLeft(){
    $("#arrowI").animate({left: "-=350"}, 6000, moveToRight)
  }
);

Learn more about jQuery animate() function.