jQuery mouseleave() with if statement not working

Question

I'm trying to keep the opacity of a clicked element on 1, while before being clicked it toggles with mouseenter and mouseleave. So I added an if statement to check wethere or not the element is clicked. Though the condition is satisfied the mouseleave function doesn't run. Here are the codes:

$('td').mouseenter(function () {
    $(this).fadeTo('fast', 0.99);
});
$('td').mouseleave(function () {
    var $opacity = $(this).opacity;
    if ($opacity < 1) {
        $(this).fadeTo('fast', 0.8);
    }
});
$('td').click(function () {
    $(this).toggleClass('tdClicked');
});

the .tdClicked class is simply a class with opacity of 1.

Now when I hover the elements, they light up but don't turn back when I mouseleave.

Answer 1

opacity is not a property of jQuery object.

One possible solution is to test whether the td has the tdClicked class instead of testing for opacity value

$('td').mouseenter(function () {
    $(this).fadeTo('fast', 0.99);
});
$('td').mouseleave(function () {
    if (!$(this).hasClass('tdClicked')) {
        $(this).fadeTo('fast', 0.8);
    }
});
$('td').click(function () {
    $(this).toggleClass('tdClicked');
});

Demo: Fiddle

Using your way: Fiddle