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

$('.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');
         });
    }
});

$('.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)
        })

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

     var itemId = $(this).data('name');
     var animated = $('.nav:animated').length;
     if( itemId === 'item1' && animated === 0) {
         $('#item1').animate({
             'left' : '300'
         }, 300, function(){
             $('.nav').bind('click');
         });
    } else if( itemId === 'item2' && animated === 0) {
         $('#item2').animate({
             'left' : '300'
         }, 300, function(){
             $('.nav').bind('click');
         });
    }
});

if($(".nav:animated").length == 0){
    $('#item1').animate({
.........