Search jQuery

jQuery Forum

Cycle plugin: change speed on Hover

in Using jQuery Plugins • 11 years ago

Hi,

I have implemented the cycle plugin. Now I when I set pause to true, it will pause on a hover, but it will first finish the current transition. This is a good thing offcourse, but I set the speed rather slow. Now what I would like is that when I hover, the speed is temporaraly changed. I have tried several ways like:

$('#cycler').cycle({speed, 100});
$('#cycler').cycle({options: {speed, 100}});
$('#cycler').cycle('speed', 100);

but none have worked. Is this at all possible, and if so, how?

Replies(3)

malsup

Re: Cycle plugin: change speed on Hover

11 years ago

http://twitter.com/#!/malsup/status/15097279677468672

migroschr..

Re: Cycle plugin: change speed dynamically

9 years ago

Not sure whether handlewithcare got this working but I have a similar issue of trying to assign dynamic values at run-time of the cycle plugin. This works great for the timeoutFn with the callback.

var myTimeOutArray[4000, 2000, 4000];
function updateTimeout(currElement, nextElement, opts, isForward)
{
var index = opts.currSlide;
return myTimeOutArray[index];
}
$("#myDiv").cycle({
width: "100%",
height: "100%",
fit: "true",
fx: "fade",
timeoutFn: updateTimeout,
autostop: 1
});

However, I'm stuck on dynamically changing the speed of every slide. Since there is no specific callback, I tried using the before/after options to trigger a function. This works to the extent that it updates the options-object of cycle in every pass, but it does not seem to read it, meaning the speed does not actually change the cycle.

var myTimeOutArray[4000, 2000, 4000];
var mySpeedArray[600, 0, 2000];
function updateSpeed(currElement, nextElement, opts, isForward)
{
var index = opts.currSlide;
opts.speed = mySpeedArray[index];
// tried return;, return opts; but to no avail
}
function updateTimeout(currElement, nextElement, opts, isForward)
{
var index = opts.currSlide;
return myTimeOutArray[index];
}
$("#myDiv").cycle({
before: updateSpeed,
width: "100%",
height: "100%",
fit: "true",
fx: "fade",
timeoutFn: updateTimeout,
autostop: 1
});

Am I missing something or is there another way of dynamically changing properties of the cycle plugin?

TIA!

migroschr..

Re: Re: Cycle plugin: change speed dynamically

9 years ago

Figured it out actually, setting the "speed" property alone does not do anything as long as "speedIn" and "speedOut" are not changed. They will keep their default values of 1000. To make it work, all three properties have to be set to the same value.

var myTimeOutArray[4000, 2000, 4000];
var mySpeedArray[600, 0, 2000];
function updateSpeed(currElement, nextElement, opts, isForward)
{
var index = opts.currSlide;
opts.speed = mySpeedArray[index];
opts.speedIn = mySpeedArray[index];
opts.speedOut = mySpeedArray[index];
}
function updateTimeout(currElement, nextElement, opts, isForward)
{
var index = opts.currSlide;
return myTimeOutArray[index];
}
$("#myDiv").cycle({
before: updateSpeed,
width: "100%",
height: "100%",
fit: "true",
fx: "fade",
timeoutFn: updateTimeout,
autostop: 1
});

Top Reply

Response title

Attachments

jQuery Forum

Cycle plugin: change speed on Hover

Replies(3)

Re: Cycle plugin: change speed on Hover

Re: Cycle plugin: change speed dynamically

Re: Re: Cycle plugin: change speed dynamically

Statistics

Tags

Actions

Related Posts