如题,看了好多网友的文章,办法是无效的,我验证出了一种方案,共享一下:
hover方法是jquery封装的js的mouseover,mouseout事件
$("#footNav img").hover(function () {
if (!$(this).is(":animated")) {
itsWidth = $(this).css("width");
itsHeight = $(this).css("height");
var itsWidthValue = itsWidth.substring(0, itsWidth.lastIndexOf('p'));
var itsHeightValue = itsHeight.substring(0, itsHeight.lastIndexOf('p'));
$(this).animate({ "width": itsWidthValue * 1.1 + "px", "height": itsHeightValue * 1.1 + "px" }, 200);
}
},function () {
$(this).animate({ "width": itsWidth, "height": itsHeight }, 200);
})
if (!$(this).is(":animated")) //这是关键,判断当前元素是不是正在执行动画,如果没有,可以执行下面的代码,如果它本身正在执行,则不叠加执行
场景:当用户快速移动鼠标的时候,快得变态的时候,导致上一个事件还没有执行完下一个又要执行了,叠加起来产生古怪的效果。
ps:本来没有想到要这么做的,变态的客户成就了这一切......