1. 最好不要在动画中使用 += 或者 获取当前的动画运行时中的 paddingLeft、paddingRight、width、height 等等 ,然后 + 、-、*、/、+= 等等 , 因为当前一个动画还没有结束的时候就有可能报JS错。比如:
$("#main-nav li a.nav-top-item").hover(
function()
{
$(this).stop().animate({ paddingLeft: "+=10px" }, 200);
},
function()
{
$(this).stop().animate({ paddingLeft: "-=10px" });
}
);
上面的代码当动画非常频繁的时候,有可能报JS错误,并且 paddingLeft 也不会恢复。应该写一个固定的值或用Jquery 的 data 方法保存原始 paddingLeft,比如:
$("#main-nav li a.nav-top-item").hover(
function()
{
$(this).stop().animate({ paddingLeft: "25px" }, 200);
},
function()
{
$(this).stop().animate({ paddingLeft: "15px" });
}
);
或者下面这种方法(推荐):
$("#main-nav li a.nav-top-item").hover(
function()
{
$(this).stop().animate({ paddingLeft: "25px" }, 200);
},
function()
{
$(this).stop().animate({ paddingLeft: "15px" });
}
).each(function(i)
{
$(this).data("originalPaddingLeft", $(this).css("paddingLeft"));
});
2.如图:
谢谢浏览!