Question

I need to prevent link from being clicked for let’s say 2 seconds.

Here is an example http://jsbin.com/orinib/4/edit

When you look at the rendered mode you see next and prev links. When you click next, it slides with a nice transition. However if you click multiple times there is no transition sort of, which is expected. But my question: is this how can I prevent clicking on the next link, for about 2 seconds (or what ever time it takes for transition to happen) so that no matter what transition will occur.
This is what I tried to use, but did not work:

function(){
var thePreventer = false;
$("#next").bind($(this),function(e){
    if(!thePreventer){
        thePreventer = true;
        setTimeout(function(){
            thePreventer = false;
        }, 2000);
    }else{
        e.preventDefault();
    }
});

}

Which I got from here "Disable" a link temporarily when clicked? I think. I believe that i cannot achieve this effect with this code (although it works on other links). I believe this is due to the fact that cycle-plugin got a hold of that link, and I understand that I have to bind/tap-into this functionality of the plugin. Please note: that this code may not work I just used it to show that I tried it and it did not work, you can reuse it if you have to or give me your own stuff.

Please help, if you can.

EDIT:
As mrtsherman proposed this simple yet elegant ANSWER: http://jsfiddle.net/LCWLb.

Answer 1

Take a look at the cycle options page. There are a number of ways to do this. I would consider using the pager event onPrevNextEvent. You can assign a callback function.

$('#slideshow').cycle({ 
    pager:  '#nav', 
    onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement)  { 
        //disable controls
    },
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        //reenable controls
    }
});