Question

When I “removeClass(‘below’)“, it removes the css class, but when I click on the object again it performs the same action.

I am trying to take away the ability for the click function to work by removing the css code. What am I doing wrong?

$('.below').click(function() {
    $(this).removeClass('below');
    $('#welcome').removeClass('fadeInLeft, bounceOutLeft').addClass('fadeOutLeft');
    $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
});

My html looks similar to this:

<div id="welcome_item" class="below">
    stuff
</div>

Please help with this, thank you.

What if I want to rebind the click after I change out the class?

$('.below').click(function() {
    $(this).unbind('click').removeClass('below').addClass('above');
    $('#welcome').removeClass('fadeInLeft bounceOutLeft').addClass('fadeOutLeft');
    $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
});

$('.above').click(function() {
    $(this).removeClass('above').addClass('below');
    $('#welcome_search').animate({"top": "+=140px"},"slow");
    $('#welcome').removeClass('fadeInLeft bounceOutLeft fadeOutLeft').delay('500').addClass('fadeInLeft');
});

Answer 1

By the time that jQuery code is run, the click event is already bound to the element with class .below, and everytime you click on the element, jQuery doesn’t actually check the class of the element anymore, so removing class won’t help you with this.

You can use unbind instead

http://api.jquery.com/unbind/

$('.below').click(function() {
    $(this).unbind('click');
    $('#welcome').removeClass('fadeInLeft, bounceOutLeft').addClass('fadeOutLeft');
    $('#welcome_search').delay('500').animate({"top": "-=140px"},"slow");
});