How to disable jQuery mouseleave event with if hasClass condition ? // hover animation
===

I have a simple hover animation; i seperated [mouseenter][1] and [mouseleave][2] functions to define a contidion on mouseleave. If that cocontidion is true; disable mouseleave function but i cant get this condition work, javascript ignores my condition and run mouseleave function.

[Here is jsFiddle.][3]

jQuery:

    $('.bigBox').mouseenter(function() {
        $('.trigger').stop().animate({'left':'-50px'},222);
        $('.bigBox').stop().animate({'left':'-1px'},222);
    });
    
    
    var holdCondition = $('#hold').hasClass('selected');
    //tried to disable mouseleave here but didnt work

    if ( !holdCondition ) {//if #hold has not class selected
        $('.bigBox').mouseleave(function() {
            $('.trigger').stop().animate({'left':'-1px'},222);
            $('.bigBox').stop().animate({'left':'-111px'},222);
        });
    }
    
    
    $('.option').click(function(){
        $('.option').removeClass('selected');
        $(this).addClass('selected');
    });

html:

    <div class="bigBox">
       <span class="trigger">X</span>
       
       <span class="option selected">A</span>
       <span class="option">B</span>
       <span id="hold" class="option">Hold</span>
    </div>

css:

    .bigBox {
        position:fixed; top:10%; width:100px; height: 20px; 
        left:-111px;  border:1px solid #000; padding-left:5px;
    }
    .trigger { 
        position:fixed; top:10%; width:20px; height: 20px; 
        left:-1px; border:1px solid #000; text-align:right; padding-right:5px;
    }
    .option { margin:0 5px; cursor:pointer; }
    .selected { color:#f00; }

​


  [1]: http://api.jquery.com/mouseenter/
  [2]: http://api.jquery.com/mouseleave/
  [3]: http://jsfiddle.net/Bvr9B/10/