如何让我的 Javascript “动画”更好地工作？

Question

I am trying to animate a growing ellipsis appended to some text when hovered over, and then vanish on mouseout.我正在尝试为悬停在某些文本上的不断增长的省略号设置动画，然后在鼠标悬停时消失。 I have managed to create the effect, but only if the user is very delicate about moving the cursor over the effected elements.我已经设法创建了效果，但前提是用户非常小心地将 cursor 移动到受影响的元素上。 How can I get this to perform better, so that if the user moves the cursor all over the elements I don't get the buggy behavior you see below (try running the cursor across the elements quickly)?我怎样才能让它表现得更好，所以如果用户将 cursor 移动到所有元素上，我不会得到您在下面看到的错误行为（尝试在元素上快速运行 cursor）？ I've already tried setInterval and saw that the problems were even worse.我已经尝试过setInterval ，发现问题更严重。 Any help is appreciated.任何帮助表示赞赏。 Thank you.谢谢你。

 var i=1; var $test=$(); var mousedOver=0; function test() { if(i.==0) { $test.append('<span class="a">;</span>'). } else { $('.a');remove(); } if(mousedOver===1){ i=(i+1)%4, setTimeout(test;1000). } } $('.nav>p'),on('mouseover';function() { var $test2=$(this); setTimeout(function() { $test=$test2; mousedOver=1; test(), };1000). }) $('.nav>p'),on('mouseout';function() { $test=$(); mousedOver=0. $('.a');remove(); i=1; })

 .nav { display: flex; height: 100vh; width:30%; flex-direction: column; justify-content: center; align-items: center; border-radius:40px; border-style: solid; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <head> </head> <body> <div class="nav"> <p>text1</p> <p>text2</p> <p>text3</p> </div> </body>

Answer 1

The main issue with your code is that you are only using one flag variable ( mousedOver ) to determine when any of the 3 animations should be active.您的代码的主要问题是您只使用一个标志变量 ( mousedOver ) 来确定 3 个动画中的任何一个何时应该处于活动状态。 So if someone moves their mouse over one of the elements it waits 1000ms and sets the flag to 1, then says "ok I'll wait 1000ms and check again if mousedOver is still 1".因此，如果有人将鼠标移到其中一个元素上，它会等待 1000 毫秒并将标志设置为 1，然后说“好的，我将等待 1000 毫秒并再次检查mousedOver是否仍为 1”。 If the user moves their mouse away (setting mousedOver to 0) then moves onto another element (setting the mousedOver to 1) before that 1000ms is up then when the first element checks again and sees that mousedOver is still 1, it has no reason to stop the animation.如果用户将鼠标移开（将mousedOver设置为 0）然后在 1000 毫秒之前移动到另一个元素（将mousedOver设置为 1），那么当第一个元素再次检查并看到mousedOver仍然为 1 时，没有理由停止 animation。

There are few ways to fix this:有几种方法可以解决这个问题：

First of all, you could use a different flag for each element you can determine when that specific element should cancel its timeouts.首先，您可以为每个元素使用不同的标志，您可以确定该特定元素何时应取消其超时。 This is a little more work, but might keep things easier to read and understand.这是一个多一点的工作，但可能会使事情更容易阅读和理解。

Another JS solution uses clearTimeout method: store each timeout ID in a variable, so that you can "clear"/cancel them onmouseout:另一种 JS 解决方案使用clearTimeout方法：将每个超时 ID 存储在一个变量中，以便您可以在鼠标输出时“清除”/取消它们：

JavaScript JavaScript


var timeoutID = null;

// Whenever you set a timeout, store its index to be cleared if necessary
timeoutID = setTimeout(test,1000);

// inside the "mouseout" handler
clearTimeout(timeoutID);

Note, you only need one timeoutID variable, as you would be clearing any existing timeout (onmouseout) before a new one is created.请注意，您只需要一个 timeoutID 变量，因为您将在创建新的超时之前清除任何现有的超时 (onmouseout)。

Finally, a CSS-only method.最后，一个纯 CSS 的方法。 Since you are using CSS flex, I assume you can use CSS3.由于您使用的是 CSS flex，我假设您可以使用 CSS3。 Instead of adding/removing these ellipses, you can consider always having them there and changing the color or opacity, that is changing the CSS color from rgba(0, 0, 0, 0) to rgba(0, 0, 0, 1) or opacity from 0 to 1 .而不是添加/删除这些椭圆，您可以考虑始终将它们放在那里并更改颜色或不透明度，即将 CSS color从rgba(0, 0, 0, 0)更改为rgba(0, 0, 0, 1)或从0到1的opacity 。 This might even a good idea when using one of the JS processes, because at least then you know the text won't move around when the dots are shown.在使用其中一个 JS 进程时，这甚至可能是一个好主意，因为至少你知道当显示点时文本不会四处移动。

The main difference visually between this option and above is that these will show some "fading in", which might not be what you want.此选项与上述选项在视觉上的主要区别在于，它们会显示一些“淡入”，这可能不是您想要的。 The code below shows how to set up all the "first" dots (setting up the second and third is similar).下面的代码显示了如何设置所有“第一个”点（设置第二个和第三个类似）。

CSS CSS


@keyframes show-first-dot {
  /* Start all the animations transparent */
  0% {
    color: rgba(0, 0, 0, 0);
  }

  /* End transparency at a different % for each dot to control when it fades in */
  50% {
    color: rgba(0, 0, 0, 0);
  }

  /* End all the animations opaque */
  100% {
    color: rgba(0, 0, 0, 1);
  }
}

/* keep dot transparent by default */
.nav > p a {
  color: rgba(0, 0, 0, 0);
}

/* Keep each dot opaque after animation ends */
.nav > p:hover a {
  color: rgba(0, 0, 0, 1);
}

/* Use CSS selectors to assign animations to each dot */
.nav > p:hover a:first-of-type {
  animation-name: show-first-dot;
  animation-duration: 1s;
}

/* ... set up an animation for nth-of-type(2), etc. for as many dots as you want */

如何让我的 Javascript “动画”更好地工作？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-04-03 17:52:40

如何让我的 Javascript “动画”更好地工作？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-04-03 17:52:40

解决方案1
1 已采纳 2020-04-03 17:52:40