Question

我有一组堆叠的图像和一组位于图像右侧的句子。我的程序是这样的：当你将鼠标悬停在一个句子上时，相应的图像会淡入堆栈的前面并且前一个图像会淡出。我有一个使用onmouseenter和onmouseleave的悬停函数，并且在两者中，调用辅助函数来执行正确的动画过程。

我遇到的问题是，如果你在第一个句子上执行动画时将鼠标悬停在另一个句子上，它就会中断。我研究了stop（true，true）并且可能在当前悬停时动画完成后创建一个回调函数，但这些都不是效果修复。

有没有人知道如何冻结未来的动画，直到当前的动画完成为止？我不应该添加到数组队列，但也许我可以在淡入淡出调用中设置一个布尔变量来检查动画的进度。

可能的解决方案：在我onmouseleave状态的onHover（）中，我调用setTimeOut延迟300ms来检查并查看默认img是否有活动类，如果没有，我动画它in（表示当用户离开句子时，300ms后，默认图像淡入）。如果用户将鼠标悬停在任何其他句子上，我想我可以添加到此函数来延迟下一个悬停的动画。

我尝试了什么

//get rid of intitial page load animation classes
$('#pics img').not($currentCase).not('.active').removeClass('first next-in-line last-in-line');

do {
    $currentCase
    //before this image is faded in, we need to add the next-in-line class so it is stacked right below the top image
        .addClass('next-in-line')
        .fadeIn(fadeSpeed, function () {
            ($(this).removeClass('next-in-line'))
        });
} while ($('#pics img.active').is(':animated'));

$currentCase.addClass('active');

以上内容在启动鼠标悬停在句子上时会冻结脚本。

* 我的回答： *对于那些可能遇到类似问题的人，在fadeIn（）的回调函数中，我使用下面的代码进行修复：

$('.active').removeClass('active').hide();

Answer 1

您可以使用

检查图像是否仍在动画处理

if($(this).is(':animated'))

一般的想法是检查某些东西是否仍然是动画的，如果它还没有开始另一个动画。

停止下一个悬停动画，直到当前完成

1 个答案: