title: jQuery - Running a Function When Class Names Are Added And/Or Removed
body: <p>I'm developing a function with a conditional statement that (for now) has to run an alert when a class name is removed from a div layer. Here's the code:</p>
  
  <pre><code>&lt;div class="ui-tabs-panel ui-tabs-hide"&gt;panel&lt;/div&gt;
  &lt;div&gt;&lt;a href="#" class="control"&gt;control&lt;/a&gt;&lt;/div&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=3.0"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  &lt;!--
  $(document).ready(function(){
      $('.control').hover(
          function() {
              $('.ui-tabs-panel').removeClass('ui-tabs-hide');
          },
          function() {
              $('.ui-tabs-panel').addClass('ui-tabs-hide');
          }
      );
      if ($('.ui-tabs-panel:not(.ui-tabs-hide)')) {
          alert('hello');
      }
  });
  //--&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The whole "control" link, and the function connected to it, are just there to trigger the adding and removal of the class name.</p>
  
  <p>Right now, the alert comes up when the page is loaded, and it shouldn't, so I think I must be getting the syntax wrong there. Removing the ui-tabs-hide class from the div with the "control" link does not trigger the alert, and it should. I'm guessing there's some kind of event binder I need to incorporate, but I don't know event binders very well.</p>
  
  <p>Can anyone help me out with this, please?</p>