Question

我正在使用以下代码扩展并以div为中心：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）我不确定如何将“top”和“left”css坐标重置为mouseOut上的原始值。要查看有效的演示，请访问：

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

2）z-index（参见此处：http://jsfiddle.net/kTFvj/1/）不影响：hovered网格元素。不知道为什么。

Answer 1

您可以使用jQuerys .data方法存储原始值并在mouseout上检索它们

我对您原来的代码进行了修改，可能会像您希望的那样工作..它使用.data并更新z-index，因此活动元素始终位于顶部

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

Answer 2

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

Answer 3

如何使用％代替像素？

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

jQuery：重置.animated divs位置

3 个答案: