我刚刚知道 jQuery onmouseenter/ onmouseleaveevent 也会在动画期间元素的位置/大小发生变化时触发，所以我在两个事件处理程序的开头使用了一个简单的验证。if (img$.is(':animated')) return false;
但是，这会导致另一个问题，有时mouseleave事件永远不会被执行，因为mouseleave已经提前返回 false 而mouseenter还没有完成。
$(function() {
$("img[data-alt-src]").on('mouseenter', function(e) {
e.stopPropagation();
e.preventDefault();
var img$ = $(e.currentTarget);
if (img$.is(':animated')) return false; // the validation
img$.finish().animate({
opacity: '-=1.0',
deg: '+=90'
}, {
duration: 250,
step: function(now) {
img$.css({
'-moz-transform': 'rotateY(' + now + 'deg)',
'-webkit-transform': 'rotateY(' + now + 'deg)',
'-o-transform': 'rotateY(' + now + 'deg)',
'-ms-transform': 'rotateY(' + now + 'deg)',
transform: 'rotateY(' + now + 'deg)'
});
},
complete: function() {
img$.data('tmp-src', img$.attr('src'));
img$.attr('src', img$.data('alt-src'));
}
});
img$.animate({
opacity: '+=1.0',
deg: '-=90'
}, {
duration: 250,
step: function(now) {
img$.css({
'-moz-transform': 'rotateY(' + now + 'deg)',
'-webkit-transform': 'rotateY(' + now + 'deg)',
'-o-transform': 'rotateY(' + now + 'deg)',
'-ms-transform': 'rotateY(' + now + 'deg)',
transform: 'rotateY(' + now + 'deg)'
});
}
});
})
.on('mouseleave', function(e) {
e.stopPropagation();
e.preventDefault();
var img$ = $(e.currentTarget);
if (img$.is(':animated')) return false; // the validation
img$.finish().animate({
opacity: '-=1.0',
deg: '+=90'
}, {
duration: 250,
step: function(now) {
img$.css({
'-moz-transform': 'rotateY(' + now + 'deg)',
'-webkit-transform': 'rotateY(' + now + 'deg)',
'-o-transform': 'rotateY(' + now + 'deg)',
'-ms-transform': 'rotateY(' + now + 'deg)',
transform: 'rotateY(' + now + 'deg)'
});
},
complete: function() {
img$.attr('src', img$.data('tmp-src'));
}
});
img$.animate({
opacity: '+=1.0',
deg: '-=90'
}, {
duration: 250,
step: function(now) {
img$.css({
'-moz-transform': 'rotateY(' + now + 'deg)',
'-webkit-transform': 'rotateY(' + now + 'deg)',
'-o-transform': 'rotateY(' + now + 'deg)',
'-ms-transform': 'rotateY(' + now + 'deg)',
transform: 'rotateY(' + now + 'deg)'
});
}
});
});
});img {
width: 150px;
height: 150px;
margin-right: 1.5em;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="position: relative; display: inline-block">
<img
src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_1-270x270.jpg"
data-alt-src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_3-270x270.jpg"
alt="">
<img
src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_1-270x270.jpg"
data-alt-src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_3-270x270.jpg"
alt="">
<img
src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_1-270x270.jpg"
data-alt-src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_3-270x270.jpg"
alt="">
<img
src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_1-270x270.jpg"
data-alt-src="http://mcenter.lazim.org/image/cache/catalog/demo/nikon_d300_3-270x270.jpg"
alt="">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
我被卡住了如何摆脱这种情况？