我正在使用以下代码在 :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 坐标重置为其原始值。要查看工作演示,请转到此处:
2) z-index(参见此处:http://jsfiddle.net/kTFvj/1/)不影响 :hovered 网格元素。不知道为什么。
最佳答案
您可以使用 jQuery .data存储原始值并在鼠标移出时检索它们的方法
我已经对您的原始代码进行了修改,它可能会像您希望的那样工作。它使用 .data 并更新 z-index,因此事件元素始终位于顶部
关于javascript - jQuery:重置 .animated div 位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4725789/