Question

I’m using jQuery Cycle plugin to create a very simple slideshow.

Below the script:

$(document).ready(function() {

var slideshow = $('#slider').cycle({

    fx: 'scrollHorz',
    speed: 500,
    timeout: 8000,
    prev: '#prev',
    next: '#next',
autostop: false 
    });
});

And the part of HTML:

<div id="slider">
<img class="slide" src="header/slider/images/FOTO_SCORRE2.jpg" alt="" />
<img class="slide" src="header/slider/images/FOTO_SCORRE3.jpg" alt="" />
<img class="slide" src="header/slider/images/FOTO_SCORRE4.jpg" alt="" />
<img class="slide" src="header/slider/images/FOTO_SCORRE5.jpg" alt="" />
</div>

My question is: how can I vary the speed of slide, during the image’s change? I would like the image accelerates from zero speed to a fixed max speed, and from mid transition decelerates to zero.

It’s possible in a simple way?

Answer 1

The technical name for what your asking about is ‘Easing’ See many examples jQuery UI Easing examples and Other easing Styles. it appears that the Cycle plugin has easing hooks that you can set.