我试图在鼠标悬停时对附加到某些文本的不断增长的省略号进行动画处理，然后在鼠标移开时消失。我已经成功地创建了效果，但前提是用户非常小心地将光标移动到受影响的元素上。我怎样才能让它表现得更好，这样如果用户将光标移动到所有元素上，我就不会出现下面看到的错误行为（尝试在元素上快速运行光标）？我已经尝试过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>
1 回答
开满天机
TA贡献1786条经验 获得超12个赞
您的代码的主要问题是您仅使用一个标志变量 ( mousedOver) 来确定 3 个动画中的任何一个何时应处于活动状态。因此，如果有人将鼠标移到其中一个元素上，它会等待 1000 毫秒并将标志设置为 1，然后说“好吧，我会等待 1000 毫秒，然后再次检查是否mousedOver仍然为 1”。如果用户在 1000 毫秒之前将鼠标移开（设置mousedOver为 0）然后移动到另一个元素（设置为mousedOver1），那么当第一个元素再次检查并看到它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)更改为rgba(0, 0, 0, 1)或opacity从0更改为 ，而不是添加/删除这些省略号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 */
- 1 回答
- 0 关注
- 48 浏览
添加回答
举报
0/150
提交
取消