2

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?

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
fireb86
  • 1,723
  • 21
  • 35
  • The technical name for what your asking about is 'Easing' See many examples here http://jqueryui.com/demos/effect/easing.html and here http://james.padolsey.com/demos/jquery/easing/. it appears that the Cycle plugin has easing hooks that you can set. – Robert Beuligmann May 03 '12 at 21:25

1 Answers1

2

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.

Robert Beuligmann
  • 1,434
  • 10
  • 13