Question

我正在尝试创建一个网格，该网格使用以下代码将一个活动的“突出显示”类随机应用于其中一个子li元素

 //add class "highlight" to random panel

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

基本上，具有.highlight类的li元素的大小是其他面板的2倍。

棘手的部分是我想删除这个.highlight类，并在突出显示时将其附加到新的li元素。

我认为这段代码可以解决这个问题，但是当我将鼠标悬停时，它并没有返回任何东西。（或者做其他任何事情！）

编辑：我已将代码添加到jsfiddle.net，供人们观看：[{3}}

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

怎么样？

不确定这是否是你想要的效果，事情正在发生。

去分叉并调整一些。

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

            });        

        });

jQuery .animate滑动面板

1 个答案: