我試圖在鼠標(biāo)懸停時(shí)對(duì)附加到某些文本的不斷增長(zhǎng)的省略號(hào)進(jìn)行動(dòng)畫處理，然后在鼠標(biāo)移開時(shí)消失。我已經(jīng)成功地創(chuàng)建了效果，但前提是用戶非常小心地將光標(biāo)移動(dòng)到受影響的元素上。我怎樣才能讓它表現(xiàn)得更好，這樣如果用戶將光標(biāo)移動(dòng)到所有元素上，我就不會(huì)出現(xiàn)下面看到的錯(cuò)誤行為（嘗試在元素上快速運(yùn)行光標(biāo)）？我已經(jīng)嘗試過setInterval并發(fā)現(xiàn)問題更嚴(yán)重。任何幫助表示贊賞。謝謝。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 回答
開滿天機(jī)
TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊
您的代碼的主要問題是您僅使用一個(gè)標(biāo)志變量 ( mousedOver) 來(lái)確定 3 個(gè)動(dòng)畫中的任何一個(gè)何時(shí)應(yīng)處于活動(dòng)狀態(tài)。因此，如果有人將鼠標(biāo)移到其中一個(gè)元素上，它會(huì)等待 1000 毫秒并將標(biāo)志設(shè)置為 1，然后說(shuō)“好吧，我會(huì)等待 1000 毫秒，然后再次檢查是否mousedOver仍然為 1”。如果用戶在 1000 毫秒之前將鼠標(biāo)移開（設(shè)置mousedOver為 0）然后移動(dòng)到另一個(gè)元素（設(shè)置為mousedOver1），那么當(dāng)?shù)谝粋€(gè)元素再次檢查并看到它mousedOver仍然是 1 時(shí)，它沒有理由停止動(dòng)畫。
有幾種方法可以解決這個(gè)問題：
首先，您可以為每個(gè)元素使用不同的標(biāo)志，您可以確定該特定元素何時(shí)應(yīng)取消其超時(shí)。這需要更多的工作，但可能會(huì)讓事情更容易閱讀和理解。
另一種 JS 解決方案使用clearTimeout方法：將每個(gè)超時(shí) ID 存儲(chǔ)在一個(gè)變量中，以便您可以在鼠標(biāo)懸停時(shí)“清除”/取消它們：
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);
請(qǐng)注意，您只需要一個(gè) timeoutID 變量，因?yàn)槟鷮⒃趧?chuàng)建新超時(shí)之前清除任何現(xiàn)有超時(shí) (onmouseout)。
最后是純 CSS 方法。由于您使用的是 CSS flex，我假設(shè)您可以使用 CSS3。您可以考慮始終將它們放在那里并更改顏色或不透明度，即將 CSScolor從rgba(0, 0, 0, 0)更改為rgba(0, 0, 0, 1)或opacity從0更改為 ，而不是添加/刪除這些省略號(hào)1。當(dāng)使用其中一個(gè) JS 進(jìn)程時(shí)，這甚至可能是一個(gè)好主意，因?yàn)橹辽倌阒喇?dāng)顯示點(diǎn)時(shí)文本不會(huì)移動(dòng)。
此選項(xiàng)與上面選項(xiàng)之間的主要視覺區(qū)別在于，這些選項(xiàng)會(huì)顯示一些“淡入”，這可能不是您想要的。下面的代碼顯示了如何設(shè)置所有“第一個(gè)”點(diǎn)（設(shè)置第二個(gè)和第三個(gè)點(diǎn)類似）。
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 關(guān)注
- 118 瀏覽
添加回答
舉報(bào)
0/150
提交
取消