Question

I am slowly moving away from Flash and into HTML/JS as a substitute. I am trying to achieve the slideshow effect as seen in the link below. In Actionscript this would be done using the Tween function.

http://www.mrporter.com/

Is there anything similar and efficient (i.e. not processor intensive) available for javascript jQuery that can allow for this….? Any recommended 3rd party packaged, API’s etc…

Many Thanks

Answer 1

jQuery animate is a great start to do animations.

Put all your images into a <div> next to eachother, and animate every 1000 ms. to the next animation.

var numberOfImages = 5, ix = 0;
setInterval(function () {
    // reset after 'numberOfImages' is reached
    ix = ++ix = numberOfImages ? 0 : ix; 

    $('#awesomeImage').animate({
        left: ix * -500px
    }, { "duration": "slow", "easing": "easein" });
}, 1000);