jQuery .animate滑动面板

Question

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

Answer 1

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

            });        

        });