首頁猿問 FadeIn 相同的 div...

FadeIn 相同的 div 但不同的數(shù)字

Html5

守著星空守著你 2024-01-22 17:09:24

我有一個簡單的 fadeIn 函數(shù)，它會淡入工具提示 1，然后淡出 2，然后淡出 3 等...是否有更動態(tài)且更好的編程方式來執(zhí)行此操作？目前，這就是我的工作方式：- 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 回答

莫回?zé)o

TA貢獻1865條經(jīng)驗獲得超7個贊

為了更有效地實現(xiàn)這一點，就 JS 代碼結(jié)構(gòu)而言，您可以在所有工具提示元素上使用公共類。然后，您可以循環(huán)遍歷此類，并向每個元素添加 a ，并在每次迭代時delay()增加一個額外值，然后再調(diào)用它們。嘗試這個：100msfadeIn()

$(".tooltip").each(function(i) {

$(this).delay(1500 + (100 * i)).fadeIn();

});

.tooltip {

display: none;

}

<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-info">Introduction</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-info">Auditorium</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>

<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-info">Partner Hall</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>

附帶說明一下，在屬性中放置 HTML 時要小心。它可能會導(dǎo)致某些瀏覽器出現(xiàn)問題。我建議對其進行 HTML 編碼。另外tooltip它不是一個標準的 HTML 屬性。如果您想在元素中存儲自定義數(shù)據(jù)，請使用data屬性，例如。data-tooltip="..."。