个人中心
gpt4 book ai didi

javascript - 如何让我的 Javascript "Animation"更好地工作？

转载 作者：行者123 更新时间：2023-12-02 21:14:34 25 4
gpt4 key购买 nike

我试图在鼠标悬停时为附加到某些文本的不断增长的省略号设置动画，然后在鼠标移开时消失。我已经成功地创建了效果，但前提是用户非常小心地将光标移动到受影响的元素上。我怎样才能让它表现得更好，这样如果用户将光标移动到所有元素上，我就不会出现下面看到的错误行为(尝试在元素上快速运行光标)？我已经尝试过 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”。如果用户在 1000 毫秒之前将鼠标移开(将 mousedOver 设置为 0)，然后移动到另一个元素(将 mousedOver 设置为 1)，那么当第一个元素检查时再次看到mousedOver仍然是1，它没有理由停止动画。

有几种方法可以解决这个问题:

首先，您可以为每个元素使用不同的标志，您可以确定该特定元素何时应取消其超时。这需要更多的工作，但可能会让事情更容易阅读和理解。

另一个JS解决方案使用clearTimeout方法:将每个超时ID存储在一个变量中，以便您可以在mouseout时“清除”/取消它们:

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。您可以考虑始终将它们放在那里并更改颜色或不透明度，而不是添加/删除这些省略号，即将 CSS color 从 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 */

关于javascript - 如何让我的 Javascript "Animation"更好地工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61004301/

25 4 0
文章推荐： javascript - 在子组件中将多个 this.props 属性分配给新变量一次时出错
文章推荐： javascript - 读取 API 请求时未定义常量
文章推荐： javascript - mySQL:如果文本列包含黑名单上的项目，则选择行
文章推荐： javascript - 如何将组件绑定(bind)到动态外部状态？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com