请看一下这个小提琴:
http://jsfiddle.net/CQG4L/1/embedded/result/
我已经在mouseenter和mouseleave事件上创建了动画队列。
你会注意到如果你鼠标悬停/鼠标移动太快就会发生奇怪的事情。 实际上,这部分是mouseleave代码
$(this).find(".back_content img").fadeOut("fast");
$(this).find(".back_content .text_content").fadeOut("fast");
未执行。
我搜索过这个问题,发现stop()是一个可能的解决方案。我试图申请停止,但根本没有区别
$(document).ready(function () {
$(".slide")
.on("mouseenter",
function () {
$(this).find(".front_content").stop(true,true).animate({
top: "-=88px",
}, 300, function () {
$(this).fadeOut("fast");
$(this).parent().find(".back_content img").fadeIn("fast");
$(this).parent().find(".back_content .text_content").fadeIn("fast");
});
})
.on("mouseleave", function () {
$(this).find(".back_content img").fadeOut("fast");
$(this).find(".back_content .text_content").fadeOut("fast");
$(this).find(".front_content").fadeIn("fast");
$(this).find(".front_content").animate({
top: "+=88px",
}, 300);
});
});
我通过对所有转换或其中一些转换应用stop()来测试它。仍然无法正常工作。