javascript - jQuery:重置 .animated div 位置

Question

我正在使用以下代码在 :hover 上扩展和居中 div

    $(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) 我不确定如何在 mouseOut 上将“顶部”和“左侧”css 坐标重置为其原始值。要查看工作演示，请转到此处:

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

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

Answer 1

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

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

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