Move Image with JavaScript | Virtual Species

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...arrow
Below is the script used for this animation. By the way, "+=" and "-=" used for relative animations_
     $(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.

No comments:

Post a Comment