0

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

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

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

可能的解决方案：在 onHover() 的 onmouseleave 状态下，我以 300 毫秒的延迟调用 setTimeOut 来检查默认 img 是否具有活动类，如果没有，我将其动画化（这意味着当用户离开句，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();
4

1 回答 1

3

您可以检查图像是否仍在使用

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

一般的想法是检查某些东西是否仍在动画中，如果是，则不要开始另一个动画。

于 2012-04-05T15:26:09.977 回答