Question

im creating a slider body but got a problem. I have a next previous “button” that will slide forward and backward. When this buttons is clicked it will removed the class that make it to do the animation to forward and backward, but when i remove the class, the animation is still working. why?

making the stuff:

    esq = 0;

    var navR,navL   = false;

$(".caixa_pequena").each(function(){
    var $element = $(this).css('left'); 
    final = parseFloat($element) + parseFloat(esq); 

    $(this).css('left', parseFloat(final) + 'px');
    esq = esq  + 200;   
});

the forward button:

$('.nav_depois').click(function(){
    desactEsq();
    desactDir();
    var nr = $(".caixa_pequena").size()-1;
    var total = (nr * (parseInt(-200)))+ parseInt($(".caixa_pequena").css('left')) + 'px';
    var m = $(".caixa_pequena").offset().left+'px'; 


    if(total != m){
        $("#texto").animate({left: '-=200'}, 'slow', function(){
            /*actEsq();
            actDir();*/
        }); 
    }   
});

the backward button

$('.nav_antes').click(function(){
    desactEsq();
    desactDir();
   var l = $(".caixa_pequena").offset().left+'px';
    if(l != $(".caixa_pequena").css('left')){  
       $("#texto").animate({left: '+=200'}, 'slow', function(){
        /*actEsq();
        actDir();*/    
       });
    }       
});

the active/desactivate

function desactDir () {
    navR = false;
    $('#nav_panel').find('.nav_depois').removeClass();
}
function desactEsq () {
    navL = false;
    $('#nav_panel').find('.nav_antes').removeClass();
}
function actDir () {
    navR = true;
    $('#nav_panel').find('#nav_next').addClass('nav_depois');
}
function actEsq () {
    navL = true;
    $('#nav_panel').find('#nav_prev').addClass('nav_antes');
}
});

the html

<div id="caixa_grande">
<div id="texto">    
    <div class="caixa_pequena">SPORT LISBOA E BENFICA</div>
    <div class="caixa_pequena">SPORTING CLUBE DE PORTUGAL</div>
    <div class="caixa_pequena">FUTEBOL CLUBE DOS COXOS</div>
</div>  
</div>
<div id="nav_panel">
    <a id="nav_next" class="nav_antes"><-------|</a>
    <a id="nav_prev" class="nav_depois">|--------></a>
</div>

Answer 1

The click method is binded to the element, when you do

$('.nav_depois').click(function(){
//code...
});

jQuery will search for every element with a class of nav_depois and set the function you passed so it will be executed when a click occurs.

To be more clear it’s binding the event, so

jQuery("element").click(f);

translates to

jQuery("element").bind("click", f);

To remove the method you should use unbind (or off if you’re using jQuery 1.7), for example

function desactDir () {
    navR = false;
    $('#nav_panel').find('.nav_depois').unbind("click");
}

and to reattach it you should bind it again (with the click or bind methods), to do that I recommend storing the function and passing it as a parameter like:

var navAntesFunction = function (){
//code
}

$('.nav_antes').click(navAntesFunction);

function actEsq () {
    navL = true;
    $('#nav_panel').find('#nav_prev').click(navAntesFunction);
}