Here is my code:

$(val1).mouseleave(function () {
    flag = false;
    $(val3 + "," + val4).mouseenter(function () {

        flag = true;
        //alert(flag);

    });
    if (flag == true) {
        //alert("if"+flag);
        $(".big" + i + j + "boxer").show();
        $(".big" + i + "box").show();
        $(".big" + i + "box").append('<div class="opacity" style="background-color:rgba(00,00,00,0.77);position:absolute;top:0;right:0;left:0;bottom:0;"></div>')
        $(".small" + i + "box").append('<div class="opacity" style="background-color:rgba(00,00,00,0.77);position:absolute;top:0;right:0;left:0;bottom:0;"></div>')

    } else {
        //alert("else"+flag);
        $('.opacity').remove();
        $(val2).hide();
        $(val3).show();

    }
});

It's not meeting flag = true condition. If I alert within $(val1).mouseleave(function(){});, it shows that flag = true; but when I alert it outside of $(val1).mouseleave(function(){});, it shows flag = false.

Well, let me explain: I have 4 blocks val1,val2,val3 and val4. When the users leave val1 and enter the val3 or val4 block, I want to set/add opacity class ... if they do not enter into val3/val4 but go into val2 or another block block then I want to remove opacity class.

Here is my code:

$(val1).mouseleave(function () {
    flag = false;
    $(val3 + "," + val4).mouseenter(function () {

        flag = true;
        //alert(flag);

    });
    if (flag == true) {
        //alert("if"+flag);
        $(".big" + i + j + "boxer").show();
        $(".big" + i + "box").show();
        $(".big" + i + "box").append('<div class="opacity" style="background-color:rgba(00,00,00,0.77);position:absolute;top:0;right:0;left:0;bottom:0;"></div>')
        $(".small" + i + "box").append('<div class="opacity" style="background-color:rgba(00,00,00,0.77);position:absolute;top:0;right:0;left:0;bottom:0;"></div>')

    } else {
        //alert("else"+flag);
        $('.opacity').remove();
        $(val2).hide();
        $(val3).show();

    }
});

It's not meeting flag = true condition. If I alert within $(val1).mouseleave(function(){});, it shows that flag = true; but when I alert it outside of $(val1).mouseleave(function(){});, it shows flag = false.

Well, let me explain: I have 4 blocks val1,val2,val3 and val4. When the users leave val1 and enter the val3 or val4 block, I want to set/add opacity class ... if they do not enter into val3/val4 but go into val2 or another block block then I want to remove opacity class.

• javascript
• jquery
• jquery-plugins
• if-statement

• could you post the html? – user405398 Commented Jul 2, 2013 at 11:28
• hi @wilsonrufus i tried flag=== true... but did not work... – Friend Commented Jul 2, 2013 at 11:34
• Are any of the blocks nested inside each other? If not, are they positioned next to each other with no space in between, or with space in between, or...? Perhaps you could show the html, and possibly include a demo at jsfiddle. – nnnnnn Commented Jul 2, 2013 at 11:44
• k try this window.flag = true & window.flag = false not sure if this will work – wilsonrufus Commented Jul 2, 2013 at 11:46
• no they are separted from each other.. atleast there is 1px space separting them... – Friend Commented Jul 2, 2013 at 11:46

3 Answers 3

At the point where you do the if test:

if(flag==true)

...flag will always be false, because you set it to false just before that. The only place it gets set to true is inside the mouseenter handler that you bind there but that handler function doesn't get called at that point.

Let me add some ments to the beginning of your code to try to make that clearer:

$(val1).mouseleave(function () {
    flag = false;                                  // set flag to false
    $(val3 + "," + val4).mouseenter(function () {  // bind a mouseenter
        flag = true;                               // that won't be called immediately
        //alert(flag);                             // so won't change flag yet
    });
    if (flag == true) {                            // flag is still false

It doesn't make sense to bind a mouseenter handler from inside the mouseleave handler, because that means every time the mouseleave occurs you bind an additional mouseenter handler to the same elements.

I can't really suggest a specific solution because you haven't explained what effect you are trying to achieve. (But I'd probably start by moving that mouseenter code somewhere else.)

$(val1).mouseleave(function () {
    flag = false;
    $(val3 + "," + val4).mouseenter(function () {

        flag = true;
        //alert(flag);
        if (flag == true) {
        //alert("if"+flag);
        $(".big" + i + j + "boxer").show();
        $(".big" + i + "box").show();
        $(".big" + i + "box").append('<div class="opacity" style="background-color:rgba(00,00,00,0.77);position:absolute;top:0;right:0;left:0;bottom:0;"></div>')
        $(".small" + i + "box").append('<div class="opacity" style="background-color:rgba(00,00,00,0.77);position:absolute;top:0;right:0;left:0;bottom:0;"></div>')

    } else {
        //alert("else"+flag);
        $('.opacity').remove();
        $(val2).hide();
        $(val3).show();

    }

    });

});

Since you have clarified your objective, I think something like this would work:

var haveLeft = null;    

$(val1).mouseleave(function () {
    haveLeft = "val1";
});

$(val2).mouseenter(function () {
    if(haveLeft === "val1") {
        // remove opacity class
    }        
}).mouseleave(function(){
    haveLeft = "val2";
});

$(val3 + "," + val4).mouseenter(function () {
    if(haveLeft === "val1") {
        // add opacity class
    }
}).mouseleave(function(){
    haveLeft = "val3/4";
});