Question

I want to disable the ‘click’ event until an animation is completed.

Mark Up

<ul>
    <li data-name="item1" class="nav">Item 1</li>
    <li data-name="item2" class="nav">Item 2</li>
</ul>

Here is my jQuery Code

$('.nav').live('click', function(){
     $('.nav').unbind('click');

     var itemId = $(this).data('name');

     if( itemId === 'item1') {
         $('#item1').animate({
             'left' : '300'
         }, 300, function(){
             $('.nav').bind('click');
         });
    } else if( itemId === 'item2') {
         $('#item2').animate({
             'left' : '300'
         }, 300, function(){
             $('.nav').bind('click');
         });
    }
});

The above code doesn’t seem to work. How do I fix it?
[If I click on ‘Item 2’ before ‘Item 1’s animation is completed, ‘Item 2’ also starts animating. I want to be able to animate only one at a time]

Answer 1

Use .bind, because .live() binds to document.

$('.nav').bind('click', function(el, ev) {
    clickme($(this), ev)
});


function clickme(obj, ev) {
    obj.unbind(ev);
    console.log(obj.css('margin-left'));
    var dest = 0;
    if (obj.css('margin-left') == '0px') {
        dest = '300';
    }
    obj.animate({
        'margin-left': dest
    }, 3000, function() {
        obj.click(function() {
            clickme(obj)
        })

workig sample: http://jsfiddle.net/oceog/CzkBu/