title: jQuery: clicked link should fade out, do not accept further clicks
body: <p>with <a href="https://stackoverflow.com/questions/4517602/jquery-fading-out-2-elements-when-1-has-been-clicked">Stackoverflow users help</a> I have now links, which fade out when clicked:</p>
  
  <p><img src="https://i.stack.imgur.com/GtF4R.png" alt="alt text"></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  a.toggle {
          color:#3E6D8E;
          background-color: #E0EAF1;
          border-bottom: 1px solid #3E6D8E;
          border-right: 1px solid #7F9FB6;
          padding: 3px 4px 3px 4px;
          margin: 2px 2px 2px 0;
          text-decoration: none;
          font-size: 90%;
          line-height: 2.4;
          white-space: nowrap;
  }
  
  a.toggle:hover {
          background-color: #e7540c;
          color: #E0EAF1;
          border-bottom: 1px solid #A33B08;
          border-right: 1px solid #A33B08;
          text-decoration: none;
  }
  
  a.filter {
          color:#3E6D8E;
          background-color: #E0EAF1;
          border-bottom: 1px solid #3E6D8E;
          border-right: 1px solid #7F9FB6;
          padding: 3px 4px 3px 4px;
          margin: 2px 2px 2px 0;
          text-decoration: none;
          font-size: 90%;
          line-height: 2.4;
          white-space: nowrap;
  }
  
  a.filter:hover {
          background-color: #3E6D8E;
          color: #E0EAF1;
          border-bottom: 1px solid #37607D;
          border-right: 1px solid #37607D;
          text-decoration: none;
  }
  &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-1.4.4.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function () {
          $('a.toggle').click(function () {
                  $(this).prev().andSelf().fadeOut('fast');
          });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;Please click on
  &lt;a class="filter" href="?filter=1"&gt;Tag 1&lt;/a&gt;&lt;a class="toggle" href="/?toggle=2"&gt;X&lt;/a&gt;&lt;/p&gt;
  
  &lt;p&gt;Please click on
  &lt;a class="filter" href="?filter=2"&gt;Tag 2&lt;/a&gt;&lt;a class="toggle" href="/?toggle=2"&gt;X&lt;/a&gt;&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But I have now the new problem, that when the "X" link has been clicked and it starts to fade out, then it can still be clicked again and this is bad for my script - because "X" shouldn't completely removes a "tag", but just move it under a hidden section as you can see in this screenshot. And then subsequent click should move it back:</p>
  
  <p><img src="https://i.stack.imgur.com/gsElV.png" alt="alt text"></p>
  
  <p>How could I prevent subsequent clicks please?</p>
  
  <p>I probably should call <strong>$(this).prev().andSelf().fadeOut('fast').attr('href', XXX);</strong> ? But what should be the new value here?</p>
  
  <p>Thank you! Alex</p>