如何讓我的 Javascript “動畫”更好地工作？

Question

我正在嘗試為懸停在某些文本上的不斷增長的省略號設置動畫，然后在鼠標懸停時消失。 我已經設法創建了效果，但前提是用戶非常小心地將 cursor 移動到受影響的元素上。 我怎樣才能讓它表現得更好，所以如果用戶將 cursor 移動到所有元素上，我不會得到您在下面看到的錯誤行為（嘗試在元素上快速運行 cursor）？ 我已經嘗試過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>

Answer 1

您的代碼的主要問題是您只使用一個標志變量 ( mousedOver ) 來確定 3 個動畫中的任何一個何時應該處於活動狀態。 因此，如果有人將鼠標移到其中一個元素上，它會等待 1000 毫秒並將標志設置為 1，然后說“好的，我將等待 1000 毫秒並再次檢查mousedOver是否仍為 1”。如果用戶將鼠標移開（將mousedOver設置為 0）然后在 1000 毫秒之前移動到另一個元素（將mousedOver設置為 1），那么當第一個元素再次檢查並看到mousedOver仍然為 1 時，沒有理由停止 animation。

有幾種方法可以解決這個問題：

首先，您可以為每個元素使用不同的標志，您可以確定該特定元素何時應取消其超時。 這是一個多一點的工作，但可能會使事情更容易閱讀和理解。

另一種 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。 而不是添加/刪除這些橢圓，您可以考慮始終將它們放在那里並更改顏色或不透明度，即將 CSS color從rgba(0, 0, 0, 0)更改為rgba(0, 0, 0, 1)或從0到1的opacity 。 在使用其中一個 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 “動畫”更好地工作？

問題描述

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