阻止下一个悬停动画发生，直到当前完成 [英] stopping next hover animation from happening until current is complete

问题描述

我在图像的右侧有一组堆叠的图像和一组句子。我的程序的工作原理如下：当您将鼠标悬停在某个句子上时，相应的图像将淡入到堆栈的前面，并且之前的图像会淡出。我有一个使用onmouseenter和onmouseleave的悬停函数，在这两种情况下，都会调用helper函数来执行正确的动画过程。

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

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

可能的解决方案：在我onmouseleave状态的onHover（）中，我调用setTimeOut延迟300ms来检查并查看默认img是否具有活动类，如果不是，则将其设为动画（这意味着当用户在300ms后离开句子，默认图像淡入）。我想我可以添加到这个功能来延迟下一个悬停的动画，如果用户悬停在任何其他句子。

我试过了

  //摆脱intitial页面加载动画类
 $（'＃pics img'） .not（$ currentCase）.not（'.active'）。removeClass（'first next-in-line last-in-line'）; 
 
 do {
 $ currentCase 
 //在这张图片淡入之前，我们需要添加下一个在线课程，因此它被叠加在顶部图片
 .addClass（'next-in-line'）
 .fadeIn（fadeSpeed，function（）{
（$（this）.removeClass（'next-in-line'））
}）; $（$'$'$'$'）;（$（'：'））; 
 
 $ currentCase.addClass（'active'）; 
  

• 上面的代码会在启动鼠标悬停在一个句子上时冻结脚本。

* 我的回答： *对于那些可能遇到过类似问题的人， fadeIn（），我使用下面的代码修复：

  $（'。active'）。removeClass（'active' ）。隐藏（）; 
  

解决方案

您可以检查图片是否仍在使用动画

  if（$（this）.is（'：animated'））
  
 
 
 
总体思路是检查是否仍有动画，如果是则不启动另一个动画。
 
I have a set of stacked images and a set of sentences to the right of the images. My program works like this: when you hover over a sentence, the corresponding image fades in to the front of the stack and the previous image fades out. I have a hover function that uses onmouseenter and onmouseleave, and in both, helper functions are called to perform the correct animation process.

The problem I am having is if you hover over another sentence when the animation is being performed on the first one, it breaks. I researched stop(true, true) and possibly creating a callback function once animation is complete on current hover over, but these aren't effect fixes.

Does anyone know of any ways to freeze a future animation until the current one's progress is complete? I shouldn't have to add to an array queue, but maybe I could set a boolean var inside the fade call to check the progress of the animation.

Possible solution: In my onmouseleave state of onHover(), i call setTimeOut with a delay of 300ms to check and see if the default img has an active class, and if not, i animate it in (which means that when the user leaves a sentence, after 300ms, the default image fades in). I think I can add to this function to delay the animation of the next hover over, if the user hovers over any other sentence.

What I've tried
//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');



The above freezes the script when initiating hover over a sentence.


*MY answer:*For those who may have ran into a similar problem, in the call back function of fadeIn(), I used the below code for a fix:
$('.active').removeClass('active').hide();

解决方案
You can check whether an image is still being animated using
if($(this).is(':animated'))
The general idea is to check whether something is still being animated, if it is then don't start another animation.

                        
这篇关于阻止下一个悬停动画发生，直到当前完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！