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

Grab The Button...

Grab the above button and add to your blog or website to get easy access to Virtual Species. Simply click the textbox, copy the code and paste where you want to see the button. That's it!