Question

I want to change the options for jquery cycle dynamically on the page. Specifically, I want the speed to drop. According to one of it’s creator, you can use ‘cycle.opts’ to do this. In my example I have specifically

$('.cycle-streams').cycle({
    fx: 'scrollVert',
    continuous: 1,
    speed: 1000,
    delay: 0,
    easing: 'linear'
});

var changedOpts = $('.cycle-streams').data('cycle.opts');

$('.cycle-streams').mouseover(function() {
    var changedOpts = $('.cycle-streams').data('cycle.opts');
    changedOpts.speed = 1000000000000;
    $('.cycle-streams').data('cycle.opts', changedOpts);
});

I’ve been working on this for some time now and am lost as to what I’m doing wrong. Any help would be appreciated. The jsfiddle is here… http://jsfiddle.net/bmXgj/

Answer 1

I changed your fiddle to this:

var changedOpts = $('.cycle-streams').data('cycle.opts');

$('.cycle-streams').mouseover(function() {
    //hover in
    $('.cycle-streams').cycle('pause');
    changedOpts.speedIn = 500;
    changedOpts.speedOut = 500;
    $('.cycle-streams').cycle('next');
    $('.cycle-streams').cycle('resume');   
});

$('.cycle-streams').mouseout(function() {
    //hover out
    $('.cycle-streams').cycle('pause');
    changedOpts.speedIn = 3000;
    changedOpts.speedOut = 3000;
    //$('.cycle-streams').cycle('next');
    $('.cycle-streams').cycle('resume');
});​

I noticed that you were re-declaring ‘changedOpts’ for some reason. When I watched this variable in the console, it was coming out as undefined. Since you already defined it I just kept using it.

also you were never resetting the state of the cycle. I added pause and resume. It appears to work now but it is not perfect. The last side needs to clear before the new speeds will be used, so drastic jumps (3000 to 500 for example) allow for a noticeable delay when trying to speed up. I also added a next statement.

I noticed that when the plugin was handling next it was clearing the timeouts. So I figured if I stored the remaining time (Pause), then moved to the next slide (next), then resumed the show (resume) that the time would be restored. This seems to be working.

The ‘next’ action, is not needed when going from fast to slow because you will not usually notice the ‘orphan’ slide when leaving the container because it is cycling quickly. I put it in there for good measure in case your speeds are not that far apart.

Also I noticed you were only changing one speed. I am assuming, without looking at the guts of the plugin, that the ‘speed’ option is used at initialization only. After adding the other two speeds I got the right action. After reviewing the ‘guts’ of the plugin, I am certain that the speed option is used for synchronizing the other two speeds. If they all do not match you may get out of sync. The initialization code uses the ‘speed’ to set ‘speedIn’ and ‘speedOut’, so we need to change those two to affect the ‘running’ speed.

http://jsfiddle.net/bmXgj/6/

EDIT: did not need to pause and resume.

EDIT2: I did need the pause and resume, but I also needed a next. Also the ‘speed’ option can be ignored once it is set the first time to start the cycle. It appears to be shorthand for speedIn = speedOut = X