jQuery .animate Sliding Panels

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

 //add class "highlight" to random panel

var elements = $('ul#sliding_panels li');
$ (elements.get (
  Math.round (elements.length*Math.random ()-0.5)
)).addClass ('highlight');

Basically, the li element with the .highlight class will be 2x the size of the other panels.

The tricky 开发者_Python百科part is that I'm looking to remove this .highlight class and attach it to a new li element when it is highlighted.

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!)

EDIT: I've added the code to jsfiddle.net for people to see it live: http://jsfiddle.net/dxzqv/2/

    <script>

//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);}
            );        

        });

    </script>

http://jsfiddle.net/dxzqv/3/

How's that?

Not sure if that is the effect you were going for, stuff is happening.

Going to fork and tweak some more.

//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").live("hover", function(){
                $(this).animate({"width": "400px", "height":"400px"}, 1000);       

            });   

            $(".highlight").live("mouseout", function(){
                $(this).animate({"width": "200px", "height":"200px"}, 1000, function(){
                 $(this).removeClass('highlight');   
                });        

            });        

        });