title: How can I prevent .stop() in certain situations?
body: <p>I'm designing a simple jquery animation so when you click a tile, it displays its info by hiding all other tiles, and displaying its information. Its basic stuff. My problem exists in the deeper core of jquery where although I am using .stop() to prevent queuing, I don't want to want .stop() to function during the animation when it transitions out the tiles and displays the description.</p>
  
  <p>My code is broken down in 3 parts. 1st is a mouseeneter which changes the opacity to adjust the opacity of each tile, the 2nd one is the mouseleave where it changes either the opacity of all tiles to normal, or adjusts the others if the mouse enters another tile. The last is basically a click function where if you click a tile, it will fade the other 4 out and show the product description. The third part is the part where things get tricky. The .stop() function in the first part is interfering with the animation when you click if your mouse happens to be in the way during the animation. I don't know how to remedy this issue.</p>
  
  <pre><code>function bannerFader(currentBanner, otherBanners, expandButton, appendInfo){
  var disableHover = false;
      $(currentBanner).mouseenter(function(){
          if (disableHover == false) {
              $(otherBanners).stop(true);
              $(otherBanners).fadeTo(100, .8);
          }
      });
      $(currentBanner).mouseleave(function(){
          if (disableHover == false) {
              $(otherBanners).fadeTo(100, 1);
          };
      });
      $(expandButton).click(function(){
          disableHover = true;
          $(otherBanners).hide(200, function(){
              $(appendInfo).show(300);
          });
      });
  }
  
  function autoRunner() {
      bannerFader('.banner-one', '.banner-two, .banner-three, .banner-four, .banner-five', '.banner-one','.append-one')
      bannerFader('.banner-two', '.banner-one, .banner-three, .banner-four, .banner-five', '.banner-two','.append-two')
      bannerFader('.banner-three', '.banner-two, .banner-one, .banner-four, .banner-five', '.banner-three','.append-three')
      bannerFader('.banner-four', '.banner-two, .banner-three, .banner-one, .banner-five', '.banner-four','.append-four')
      bannerFader('.banner-five', '.banner-two, .banner-three, .banner-four, .banner-one', '.banner-five','.append-five')
  };
  </code></pre>
  
  <p>Basically, I want everything to work the same way as it does, just without .stop() from interefering with the transition. You can find an example of my problem here:</p>
  
  <p><a href="http://rockforddriveline.com/newrdl/index.html" rel="nofollow">http://rockforddriveline.com/newrdl/index.html</a></p>