jQuery:重置.animated div位置

Question

我使用下面的代码来扩展和集中在div on上:hover

    $(document).ready(function(){         


    //animation on hover            

        $('#sliding_grid li').hover(function() {
          $(this).addClass('highlight');
        }, function() {
          //$(this).removeClass('highlight');
        });

        $(".highlight").live("hover", function(){
            $(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"}, 500);       

        });   

        $(".highlight").live("mouseout", function(){
            $(this).animate({"width": "148px", "height":"90px", "top: ":"0px", "left":"0px", "margin-top: ":"0", "margin-left":"0"}, 500, function(){
             $(this).removeClass('highlight');   
            });        

        });        

    });

我的问题是两件事：

1)我不确定如何将“上”和“左”css坐标重置为mouseOut上的原始值。要查看工作演示，请转至此处：

http://jsfiddle.net/kTFvj/1/

2) z索引(参见此处：http://jsfiddle.net/kTFvj/1/)不会影响:hovered网格元素。不知道为什么。

Answer 1

您可以使用jQuerys .data方法存储原始值并在鼠标输出时检索它们

我已经对您的原始代码进行了修改，可能会像您所希望的那样工作。它使用.data并更新z索引，以使活动元素始终位于顶部

http://jsfiddle.net/kTFvj/2/

Answer 2

1. 正如Martin所说，使用变量存储动画开始时的值，并在完成时恢复。
2. 关于z索引:只需有一个名为maxZIndex=0的变量，每次动画开始时，将对象的zIndex属性设置为maxZIndex++

Answer 3

使用%而不是像素怎么样？

另一种解决方案是在一些变量中保存宽度和高度的实际值，并在鼠标输出时恢复。