jQuery If .hasClass, then enable .hover

Question

I have 2 divs: .left and .right.

What I want, is that when .active class isn't linked to these divs, then enable .hover function. It does this if:

if (!($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active"))) {}

But it doesn't work, if I change this condition to true, or false, then script doesn't realize it . It looks like it remembers value of this condition from the page load, not changes after that.

if (!($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active"))) {
        $(".left").hover(function(){
            $(".left").css("margin-left", "-10%");
            }, function(){
            $(".left").css("margin-left", "-50%");
        });
        $(".left").hover(function(){
            $(".right").css("margin-left", "90%");
            }, function(){
            $(".right").css("margin-left", "50%");
        });
        //animace praveho panelu
        $(".right").hover(function(){
            $(".left").css("margin-left", "-90%");
            }, function(){
            $(".left").css("margin-left", "-50%");
        });
        $(".right").hover(function(){
            $(".right").css("margin-left", "10%");
            }, function(){
            $(".right").css("margin-left", "50%");
        });
    }
    
    $(".left").click(function () {
        $(".left").addClass("active");
        $(".right").removeClass("active");
        $(".left").css("margin-left", "-10%");
        $(".right").css("margin-left", "90%");
        
    });
    $(".right").click(function () {
        $(".right").addClass("active");
        $(".left").removeClass("active");
        $(".left").css("margin-left", "-90%");
        $(".right").css("margin-left", "10%");
    });

body { 
  line-height: 1; 
  overflow-x: hidden;
}
html,body, input, textarea{
    height: 100%;
}

.container{
    width: 100%;
    height: 100%;
    background-color: aqua;
   }
   
    .half{
        display: inline;
        position: absolute;
        width: 100%;
        height: 100%;
        transition-duration: .5s;
        transition-timing-function: ease-in-out;
    }
    
    .left{
        margin-left: -50%;
        background-color: antiquewhite;
    }
    .right{
        margin-left: 50%;
        background-color: cadetblue;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
            <div class="half left" id="panel-left">
                
            </div>
            <div class="half right" id="panel-right">
                
            </div>
        </div>

Goal:

Hover works, when the page is loaded, but once you click on one of these divs, then

$(".right").click(function () {
  $(".right").addClass("active");
});

So in this logic, .active will be added to .right, so hover wouldn't work anymore... But it does.

Answer 1

var left = $('.left');
var right = $('.right');


function activateHoverRight() {
// remove left hover listener
  left.off('hover');
  right.hover(function() {
    right.css("margin-left", "10%");
    left.css("margin-left", "-90%");
  }, function(){
    right.css("margin-left", "50%");
    left.css("margin-left", "-50%");
  });
}

function activateHoverLeft() {
  // remove right listener
  right.off('hover');
  left.hover(function() {
    left.css("margin-left", "-10%");
    right.css("margin-left", "90%");
  }, function(){
    left.css("margin-left", "-50%");
    right.css("margin-left", "50%");
  });
}

left.click(function () {
  activateHoverLeft();
  left.css("margin-left", "-10%");
  right.css("margin-left", "90%");   
});

right.click(function () {
  activateHoverRight();
  left.css("margin-left", "-90%");
  right.css("margin-left", "10%");
});

Answer 2

function clicked() {
  var bool = ($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active"));
  return bool;


}

$(".left").hover(function() {
  if (!clicked()) ;
    $(".left").css("margin-left", "-10%");
}, function() {
  if (!clicked())
    $(".left").css("margin-left", "-50%");
});
$(".left").hover(function() {
  if (!clicked())
    $(".right").css("margin-left", "90%");
}, function() {
  if (!clicked())
    $(".right").css("margin-left", "50%");
});
//animace praveho panelu
$(".right").hover(function() {
  if (!clicked())
    $(".left").css("margin-left", "-90%");
}, function() {
  if (!clicked())
    $(".left").css("margin-left", "-50%");
});
$(".right").hover(function() {
  if (!clicked())
    $(".right").css("margin-left", "10%");
}, function() {
  if (!clicked())
    $(".right").css("margin-left", "50%");
});


$(".left").click(function() {
  $(".left").addClass("active");
  $(".right").removeClass("active");
  $(".left").css("margin-left", "-10%");
  $(".right").css("margin-left", "90%");

});
$(".right").click(function() {
  $(".right").addClass("active");
  $(".left").removeClass("active");
  $(".left").css("margin-left", "-90%");
  $(".right").css("margin-left", "10%");
});

Can be optimized, but at least it does what you want. Hope that helps, and good luck!