CODEWITHSUNDEEP
javascriptjqueryhovermouseovercycle
David
David

Reputation: 21

jquery cycle with hover effect

hi all i need some help still very new to jquery

i am using the cycle add-on i have the following so far i am trying to find away of adding onto it a hover

so when a user hovers over the links in menu it is cycling through it pauses the cycle and switch to hover ie user control

but after awhile of mouse-out it resumes

var n=0
var dn=1
$(document).ready(function() {
$('.slideshow') 
.cycle({ 
fx:     'fade', 
speed:  500, 
timeout: 3000, 
before: function(curr, next, opts) {
     n=n+1;
    if (n>5) {n=1;dn=5}
    $('#item'+dn).removeClass("active");
    $('#item'+(n)).addClass("active");
    dn=n;
    } 
});

$(".slideshow").cycle('resume');

$(".slideshow").mouseover(function(){
  $(this).cycle('pause');
}).mouseout(function(){
  $(this).cycle('resume');
});
});

any help on this would be great thanks

Upvotes: 2

Views: 1718

Answers (1)

Calum
Calum

Reputation: 5316

$(".slideshow").hover(function(){
    clearTimeout();
    $(this).cycle('pause');
}, function(){
    setTimeout(function(){
        $(this).cycle('resume');
    }, 500);
});

Current set to resume after 500ms of not hovering over the slideshow.

Upvotes: 2

Related Questions