Jquery cycle plugin timeout speeds up after click?

Question

I am using the cycle plugin along with some other jquery script, I am also using the option to control the cycle plugin slides with an external nav, namely, <li> elements under ul#pan_ul.

Everything seems to work fine, I have the timeout set to: 8000, but after a few clicks navigating around different slides, the cycle timeout frequency seems to increase, and becomes variable. One slide seems to have a timeout of 2000 and the next 5000, then 1000. Once again, this happens only after some of the nav li's are clicked, it will run perfectly fine beforehand. here is my code:

function cycleIt(){
$('#showcase').cycle({ 
    fx:     'scrollRight',
    timeout: 8000,
    before:  onBefore,
    pager:  '#pan_ul',
        pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#pan_ul li:eq(' + idx + ')'; 
        }
 });
}

function onBefore(){
    var currentPanel = $(this).index();
    var lastPanel = $(this).index()-1;
    if (lastPanel != -1) {
            $("#pan_ul li:eq("+currentPanel+")").css({"background-image":"url(Images/panelslice_ON.jpg)"})
            $("#pan_ul li:eq("+lastPanel+")").css({"background-image":"url(Images/panelslice.jpg)"});
                }
                else {
                $("#pan_ul li:first").css({"background-image":"url(Images/panelslice_ON.jpg)"})
                $("#pan_ul li:last").css({"background-image":"url(Images/panelslice.jpg)"});
                }           
}


$("#pan_ul li").click(function(){
    var oldPanel = $(".case:visible").index();
    var ind = $(this).index('#pan_ul li');

    $("#pan_ul li").css({"background-image":"url(Images/panelslice.jpg)"})
    $("#pan_ul li:eq("+ind+")").css({"background-image":"url(Images/panelslice_ON.jpg)"})
    /*$('#showcase').cycle('stop');
return false;
    $(".case:eq("+oldPanel+")").hide();
    $(".case:eq("+ind+")").show();


*/
})
});

I have uploaded the test site I am making live on the web if you want to check it out in person. The actions is every 8 seconds. In order to see the problem just click around like a madman in different items of the scrolling navigation for a few seconds. Then watch the timeout change in the slideshow.

http://almostfamousevents.com/TEST/

alonisser alonisser · Accepted Answer · 2012-01-17T23:10:37

I tried to reproduce in chrome and for a second the timeout seemed to change but then went back to normal. So that leads me to suspect that the problem source is some bubbling event from the clicks. you can stop the event bubbling up and the default behaviors if set somewhere with calling the following inside the :

$.click(function(event){
event.preventDefault();
event.stopPropagation() ;
//rest of your code

Jquery cycle plugin timeout speeds up after click?

1 Answers