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

I have a simple hover animation; i seperated mouseenter and mouseleave 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.

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; }

​

Rating: 4 out of 5 based on 3 ratings

Posts Related to javascript - How to disable jQuery mouseleave event with if hasClass condition ? // hover animation

• Jul 12th, 2012 How to disable combination of keys using javascript? Thursday AM 08:11:57


• Jul 22nd, 2012 ASP.NET WebForms/jQuery: jQuery .click event on button keeps button's serverside OnClick event from firing Sunday AM 03:26:31


• Jul 14th, 2012 Repetitive JavaScript (jQuery) code Saturday AM 05:10:51


• Jul 17th, 2012 javascript - Show or hide form element Tuesday AM 05:50:32


• Jul 24th, 2012 php - apply a show on hover to a repeating div that changes name Tuesday AM 01:25:01


• Jul 14th, 2012 node.js - javascript stop an infinite loop Saturday AM 01:11:29


• Jul 21st, 2012 eval condition in javascript where the parameter type mismatch Saturday AM 10:58:41


• Jul 14th, 2012 asp.net - How to disable anchor tag after first click in javascript ? Saturday PM 12:42:08


• Jul 14th, 2012 jquery - Javascript drop-down menu not working Saturday AM 07:21:30


• Jul 15th, 2012 jquery - Javascript drop-down menu not working Sunday AM 10:12:04

The post javascript – How to disable jQuery mouseleave event with if hasClass condition ? // hover animation appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-how-to-disable-jquery-mouseleave-event-with-if-hasclass-condition-hover-animation.html