title: jQuery .animate Sliding Panels
body: <p>I'm trying to create a grid that uses the following code to randomly apply an active "highlight" class to one of the child li elements</p>
  
  <pre><code> //add class "highlight" to random panel
  
  var elements = $('ul#sliding_panels li');
  $ (elements.get (
    Math.round (elements.length*Math.random ()-0.5)
  )).addClass ('highlight');
  </code></pre>
  
  <p>Basically, the li element with the .highlight class will be 2x the size of the other panels.</p>
  
  <p>The tricky part is that I'm looking to remove this .highlight class and attach it to a new li element when it is highlighted.  </p>
  
  <p>I thought this code would do the trick but it's not returning anything when I hover .highlight (or doing anything else for that matter!)</p>
  
  <p><strong>EDIT: I've added the code to jsfiddle.net for people to see it live: <a href="http://jsfiddle.net/dxzqv/2/" rel="nofollow">http://jsfiddle.net/dxzqv/2/</a></strong></p>
  
  <pre><code>    &lt;script&gt;
  
  //add class "highlight" to random panel
          $(document).ready(function(){         
  
              var elements = $('ul#sliding_grid li');
              $ (elements.get (
                Math.round (elements.length*Math.random ()-0.5)
              )).addClass ('highlight');        
  
  //animation on hover            
  
              $('#sliding_grid li').hover(function() {
                $(this).addClass('highlight');
              }, function() {
                $(this).removeClass('highlight');
              });
  
              $(".highlight").hover(
                  function(){$(this).animate({width: 400px, height:400px}, 1000);},        
                  function(){$(this).animate({width: 200px, height:200px}, 1000);}
              );        
  
          });
  
      &lt;/script&gt;
  </code></pre>