How to stop .hover from triggering inside an if statement?

Question

I am trying to stop a .hover action whenever a div changes height.

This is the code I have so far:

if (secondary.height() <= 300) {
    secondary.css("height",300);
    secondary.hover(function(){
        jQuery('.comments-holder').css("height",mediumHeight);
    },
    function(){             
        jQuery('.comments-holder').css("height",minHeight);     
    });
} else {
    // DO SOMETHING ELSE
}

The problem I am having is that .hover is being triggered no matter what the if statement implies.

Answer 1

Check for the height inside the hover function.

secondary.hover(function(){
    if (secondary.height() <= 300) {
      jQuery('.comments-holder').css("height",mediumHeight);
      }
},
function(){    
    if (secondary.height() <= 300) {         
     jQuery('.comments-holder').css("height",minHeight);    
    } 
});