我有一個簡單的 fadeIn 函數，它會淡入工具提示 1，然后淡出 2，然后淡出 3 等...是否有更動態且更好的編程方式來執行此操作？目前，這就是我的工作方式：- HTML <div class="tooltips tooltip1" tooltip="<h2>Introduction <div>Area</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button red-btn'><a href='#'>Watch Video</a></div>" tooltip-position="top"> <div class="tooltip-pad"> <div class="tooltip-info"> Introduction </div> </div> </div> <div class="tooltips tooltip2" tooltip="<h2>Auditorium <div>Area-in</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button purple-btn'><a href='#'>View Auditorium Area</a></div>" tooltip-position="top"> <div class="tooltip-pad"> <div class="tooltip-info"> Auditorium </div> </div> </div> <div class="tooltips tooltip3" tooltip="<h2>Main Hall Area <div>Video</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button'><a href='#'>View Main Hall Area</a></div>" tooltip-position="top"> <div class="tooltip-pad"> <div class="tooltip-info"> Main Hall </div> </div> </div> <div class="tooltips tooltip4" tooltip="<h2>Experience <div>Area</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button black-btn'><a href='#'>View Experience Area</a></div>" tooltip-position="top"> <div class="tooltip-pad"> <div class="tooltip-info"> Partner Hall </div> </div> </div>
1 回答
莫回無
TA貢獻1865條經驗 獲得超7個贊
為了更有效地實現這一點，就 JS 代碼結構而言，您可以在所有工具提示元素上使用公共類。然后，您可以循環遍歷此類，并向每個元素添加 a ，并在每次迭代時delay()增加一個額外值，然后再調用它們。嘗試這個：100msfadeIn()
$(".tooltip").each(function(i) {
$(this).delay(1500 + (100 * i)).fadeIn();
});
.tooltip {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tooltip" tooltip="<h2>Introduction <div>Area</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button red-btn'><a href='#'>Watch Video</a></div>" tooltip-position="top">
<div class="tooltip-pad">
<div class="tooltip-info">Introduction</div>
</div>
</div>
<div class="tooltip" tooltip="<h2>Auditorium <div>Area-in</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button purple-btn'><a href='#'>View Auditorium Area</a></div>" tooltip-position="top">
<div class="tooltip-pad">
<div class="tooltip-info">Auditorium</div>
</div>
</div>
<div class="tooltip" tooltip="<h2>Main Hall Area <div>Video</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button'><a href='#'>View Main Hall Area</a></div>" tooltip-position="top">
<div class="tooltip-pad">
<div class="tooltip-info">Main Hall</div>
</div>
</div>
<div class="tooltip" tooltip="<h2>Experience <div>Area</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button black-btn'><a href='#'>View Experience Area</a></div>" tooltip-position="top">
<div class="tooltip-pad">
<div class="tooltip-info">Partner Hall</div>
</div>
</div>
<div class="tooltip" tooltip="<h2>Sign <div>In</div></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class='main-button purple-btn'><a href='#'>Sign In</a></div>" tooltip-position="top">
<div class="tooltip-pad">
<div class="tooltip-info">Sign In</div>
</div>
</div>
附帶說明一下，在屬性中放置 HTML 時要小心。它可能會導致某些瀏覽器出現問題。我建議對其進行 HTML 編碼。另外tooltip它不是一個標準的 HTML 屬性。如果您想在元素中存儲自定義數據，請使用data屬性，例如。data-tooltip="..."。
- 1 回答
- 0 關注
- 132 瀏覽
添加回答
舉報
0/150
提交
取消