Переменная скорость для горизонтального слайдера плагина jQuery Cycle

Я использую плагин jQuery Cycle для создания очень простого слайд-шоу.

Под скриптом:

$(document).ready(function() {

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

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

И часть 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>

Мой вопрос: как я могу изменить скорость слайда при смене изображения? Я хотел бы, чтобы изображение ускорялось с нулевой скорости до фиксированной максимальной скорости, а с середины перехода замедлялось до нуля.

Можно по-простому?


person fireb86    schedule 03.05.2012    source источник
comment
Техническое название того, о чем вы спрашиваете, — «Easing». См. множество примеров здесь jqueryui.com/demos/ effect/easing.html и здесь james.padolsey.com/demos/jquery/ смягчение. похоже, что у плагина Cycle есть хуки смягчения, которые вы можете установить.   -  person Robert Beuligmann    schedule 04.05.2012
comment
именно то, что я искал, спасибо :)   -  person fireb86    schedule 04.05.2012


Ответы (2)


Техническое название того, о чем вы спрашиваете, — «Easing». См. множество примеров Примеры плавности пользовательского интерфейса jQuery и Другие стили плавности . похоже, что у плагина Cycle есть хуки смягчения, которые вы можете установить.

person Robert Beuligmann    schedule 03.05.2012

Спасибо, вы правы, easing поддерживает плагин Cycle. Я изменил код, добавив опцию:

easing: 'easeInOutExpo',

Это было легко!

person fireb86    schedule 09.05.2012