我試圖在鼠標懸停時對附加到某些文本的不斷增長的省略號進行動畫處理，然后在鼠標移開時消失。我已經成功地創建了效果，但前提是用戶非常小心地將光標移動到受影響的元素上。我怎樣才能讓它表現得更好，這樣如果用戶將光標移動到所有元素上，我就不會出現下面看到的錯誤行為（嘗試在元素上快速運行光標）？我已經嘗試過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條經驗 獲得超13個贊
您的代碼的主要問題是您僅使用一個標志變量 ( 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 關注
- 119 瀏覽
添加回答
舉報
0/150
提交
取消