Return to Answer

added 65 characters in body

edited Feb 27, 2012 at 19:53

A cursory glance at the plugin's documentation yielded this example, which seems close to what you're aiming for. Alas, no fade...

Anyway, I tinkered a little with it, and this works. It's not elegant, but that's mostly the plugin's fault...

$(function() { $('#slideshow').cycle({ fx: 'fade', speed: 1000, timeout: 6000, pager: '#nav', pagerEvent: 'mouseover' }); // retrieve plugin data (i.e. the speed params) var data = $('#slideshow').data('cycle.opts'); // bind navigation mouseenter to increased speed and vice versa $('#nav').bind('mouseenter mouseleave', function(e) { if (e.type == 'mouseenter') { data.speedIn = 100; data.speedOut = 100; } else { data.speedIn = 1000; data.speedOut = 1000; } }); });

Also, lose the "InitializeCycle()", right now it's just a useless wrap. Maybe consider using a different plugin altogether. Oh, and one more thing: nice page design!

PS: It's better to put the scripts at the end of the document.

A cursory glance at the plugin's documentation yielded this example, which seems close to what you're aiming for. Alas, no fade...

Anyway, I tinkered a little with it, and this works. It's not elegant, but that's mostly the plugin's fault...

$(function() { $('#slideshow').cycle({ fx: 'fade', speed: 1000, timeout: 6000, pager: '#nav', pagerEvent: 'mouseover' }); // retrieve plugin data (i.e. the speed params) var data = $('#slideshow').data('cycle.opts'); // bind navigation mouseenter to increased speed and vice versa $('#nav').bind('mouseenter mouseleave', function(e) { if (e.type == 'mouseenter') { data.speedIn = 100; data.speedOut = 100; } else { data.speedIn = 1000; data.speedOut = 1000; } }); });

Also, lose the "InitializeCycle()", right now it's just a useless wrap. Maybe consider using a different plugin altogether. Oh, and one more thing: nice page design!

A cursory glance at the plugin's documentation yielded this example, which seems close to what you're aiming for. Alas, no fade...

Anyway, I tinkered a little with it, and this works. It's not elegant, but that's mostly the plugin's fault...

$(function() { $('#slideshow').cycle({ fx: 'fade', speed: 1000, timeout: 6000, pager: '#nav', pagerEvent: 'mouseover' }); // retrieve plugin data (i.e. the speed params) var data = $('#slideshow').data('cycle.opts'); // bind navigation mouseenter to increased speed and vice versa $('#nav').bind('mouseenter mouseleave', function(e) { if (e.type == 'mouseenter') { data.speedIn = 100; data.speedOut = 100; } else { data.speedIn = 1000; data.speedOut = 1000; } }); });

Also, lose the "InitializeCycle()", right now it's just a useless wrap. Maybe consider using a different plugin altogether. Oh, and one more thing: nice page design!

PS: It's better to put the scripts at the end of the document.

Source Link

answered Feb 27, 2012 at 19:46

hardyharzen

A cursory glance at the plugin's documentation yielded this example, which seems close to what you're aiming for. Alas, no fade...

Anyway, I tinkered a little with it, and this works. It's not elegant, but that's mostly the plugin's fault...

$(function() { $('#slideshow').cycle({ fx: 'fade', speed: 1000, timeout: 6000, pager: '#nav', pagerEvent: 'mouseover' }); // retrieve plugin data (i.e. the speed params) var data = $('#slideshow').data('cycle.opts'); // bind navigation mouseenter to increased speed and vice versa $('#nav').bind('mouseenter mouseleave', function(e) { if (e.type == 'mouseenter') { data.speedIn = 100; data.speedOut = 100; } else { data.speedIn = 1000; data.speedOut = 1000; } }); });

Also, lose the "InitializeCycle()", right now it's just a useless wrap. Maybe consider using a different plugin altogether. Oh, and one more thing: nice page design!