title: jQuery fadeIn fadeOut run on ClassName
body: <p>I have Grid / List view content and want to run the javascript code only at Grid View.
  I have added the Main Class for Grid ".grid" but it still effect the List view too.</p>
  
  <pre><code>// SHOW HIDE GALLERY BUY BUTTONS
  $(document).ready(function(){
      $('ul.grid li.text').hover( 
      function(){
          $(this).find('.button').delay(400).fadeIn(200);
      },
      function(){
          $(this).find('.button').clearQueue().fadeOut(400);
      });
  });
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="buttons"&gt;
          &lt;button class="grid"&gt;Grid View&lt;/button&gt;
          &lt;button class="list"&gt;List View&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;ul class="list"&gt;
          &lt;li class="text"&gt;Item 1&lt;button class="button"&gt;Button&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;Item 2&lt;/li&gt;
          &lt;li&gt;Item 3&lt;/li&gt;
          &lt;li&gt;Item 4&lt;/li&gt;
          &lt;li&gt;Item 5&lt;/li&gt;
          &lt;li&gt;Item 6&lt;/li&gt;
          &lt;li&gt;Item 7&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>Check the <a href="http://jsfiddle.net/v57JF/282/" rel="nofollow">jsFiddle Demo</a></p>
  
  <p>After the Page loads</p>
  
  <ol>
  <li>In List View Button is shown and should stay showed</li>
  <li>In Grid View Button should be hidden and at a mouseover the list should be shown.</li>
  </ol>