title: HTML checkbox turns on text magnify function in JavaScript/Jquery but can't turn it off
body: <p>I'm writing some code to magnify text once you hover over it if you have the Magnify checkbox selected. It works to turn on the magnifier but I can't figure out how to turn it off once the checkbox is unselected. </p>
  
  <p><strong>textmagn.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Text Magnification&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="lines.css"&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;ul&gt;
           &lt;p&gt;
              &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
              &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
              &lt;script src="javasc.js"&gt;&lt;/script&gt;
              &lt;a&gt;This is a sentece.&lt;/a&gt;
              &lt;a&gt;A very long sentence.&lt;/a&gt;
              &lt;a&gt;Magnify this sentence.&lt;/a&gt;
           &lt;/p&gt;
        &lt;/ul&gt;
        &lt;input type="checkbox" name="check"&gt;
        Magnify
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>javasc.sc</strong></p>
  
  <pre><code>$(document).ready(function() {
      $('input[type="checkbox"][name="check"]').change(function() {
          if(this.checked) {
              $('a').hover(function(){
                  $(this).animate({'z-index':'1','font-size':'30px'},50);
              },
              function(){
               $(this).animate({'z-index':'0','font-size':'15px'},50);
              });
          }
      });
  });
  </code></pre>
  
  <p><strong>lines.css</strong></p>
  
  <pre><code>a {
      text-decoration:none;
      font-size: 15px;
  }
  ul {
      list-style-type:none;
  }
  li {
      display: inline;
      padding-left: 50px;
  }
  </code></pre>