javascript - 如何让我的 Javascript“动画”更好地工作?
问题描述
我正在尝试为悬停在某些文本上的不断增长的省略号设置动画,然后在鼠标悬停时消失。我已经设法创建了效果,但前提是用户非常小心地将光标移动到受影响的元素上。我怎样才能让它表现得更好,这样如果用户将光标移动到所有元素上,我就不会出现您在下面看到的错误行为(尝试快速在元素上运行光标)?我已经尝试过setInterval,发现问题更严重。任何帮助表示赞赏。谢谢你。
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>
解决方案
您的代码的主要问题是您只使用一个标志变量 ( mousedOver
) 来确定 3 个动画中的任何一个何时应该处于活动状态。因此,如果有人将鼠标移到其中一个元素上,它会等待 1000 毫秒并将标志设置为 1,然后说“好的,我将等待 1000 毫秒并再次检查是否mousedOver
仍为 1”。如果用户将鼠标移开(设置mousedOver
为 0)然后在 1000 毫秒之前移动到另一个元素(设置mousedOver
为 1),那么当第一个元素再次检查并看到它mousedOver
仍然是 1 时,没有理由停止动画.
有几种方法可以解决这个问题:
首先,您可以为每个元素使用不同的标志,您可以确定该特定元素何时应取消其超时。这是一个多一点的工作,但可能会使事情更容易阅读和理解。
另一种 JS 解决方案使用clearTimeout
方法:将每个超时 ID 存储在一个变量中,以便您可以在鼠标输出时“清除”/取消它们:
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);
请注意,您只需要一个 timeoutID 变量,因为您将在创建新的超时之前清除任何现有的超时 (onmouseout)。
最后,一个纯 CSS 的方法。由于您使用的是 CSS flex,我假设您可以使用 CSS3。除了添加/删除这些椭圆之外,您可以考虑始终将它们放在那里并更改颜色或不透明度,即将 CSScolor
从rgba(0, 0, 0, 0)
torgba(0, 0, 0, 1)
或opacity
from 0
to 更改1
。在使用其中一个 JS 进程时,这甚至可能是一个好主意,因为至少您知道当显示点时文本不会四处移动。
此选项与上述选项在视觉上的主要区别在于,它们会显示一些“淡入”,这可能不是您想要的。下面的代码显示了如何设置所有“第一个”点(设置第二个和第三个类似)。
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 */
推荐阅读
- python - 用于打开记事本并使用 pyautogui lib 编写的 Python 脚本
- python - 使用 PIL 将 PNG 更改为 TGA 时遇到问题
- python - 使用 Python Selenium 浏览 chrome://downloads/ 页面
- c# - 不使用 Business Event 的 Acumatica 移动推送通知
- python - 从 python 列表中绘制相等数量的列表元素
- angular - 无法使用 ngfor ANGULAR 在 html 中获取值
- r - 尝试在 R 3.6.3 上安装 metaSeq 包时出错
- java - 如何在 mac 上安装 openjdk 8 和 sbt 并使用默认的 openjdk 8(不是 13)?
- flutter - Flutter 弯曲导航栏不切换页面
- django - 使用 docker-compose 和 kubernetes 提供 API 时的 Nginx 上游服务器值