首頁(yè) 猿問 jQuery 淡入和淡出消息列表

jQuery 淡入和淡出消息列表

Html5

吃雞游戲 2023-12-04 16:05:48

我嘗試修改下面的代碼以淡出消息列表，我需要它在最后一條消息處停止，我設(shè)法做到了，但最后一條消息不斷淡入和淡出，我不知道如何防止它像暗淡的燈泡一樣褪色。<script>jQuery(function($) {$(document).ready(function(){ $("button").click(function(){ $("#demo").fadeTo( "slow", 1 ); (function($){ $.fn.extend({ rotaterator: function(options) { var defaults = { fadeSpeed: 500, pauseSpeed: 100, child:null }; var options = $.extend(defaults, options); return this.each(function() { var o =options; var obj = $(this); var items = $(obj.children(), obj); items.each(function() {$(this).hide();}) if(!o.child){var next = $(obj).children(':first'); }else{var next = o.child; } $(next).fadeIn(o.fadeSpeed, function() { $(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() { var next = $(this).next(); if (next.length == 0){ next = $(obj).children(':last'); } $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed}); }) }); }); } }); })(jQuery); $(document).ready(function() { $('#rotate').rotaterator({fadeSpeed:500, pauseSpeed:100}); }); }); });});</script> <button class="btn" type="submit" style="min-width: 200px;margin-top: 40px;margin-bottom: 0px;" onclick="myFunction()">Sign Up!</button> <h1 id="demo" style="opacity:0;"> I am <div id="rotate"> <div>awesome.</div> <div>invincible.</div> <div>unbeatable.</div> <div>indestructible.</div> </div> </h1>

查看完整描述

1 回答

慕田峪7331174

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

這是一些非常奇特的代碼！我可能會(huì)嘗試一個(gè)更簡(jiǎn)單的解決方案，但你擁有的是一個(gè)漂亮且靈活的 jQuery 函數(shù)。

這是代碼的 JSFiddle，僅進(jìn)行了一項(xiàng)更改 - 在顯示最后一個(gè)元素后停止動(dòng)畫，這正是您所需要的。

問題是這段代碼：

if (next.length == 0) {
    next = $(obj).children(':last');
}

表示當(dāng)沒有要設(shè)置動(dòng)畫的“下一個(gè)”元素時(shí)，請(qǐng)使用要設(shè)置動(dòng)畫的集合中的最后一個(gè)元素（#rotate在您的示例中）。因此，一旦它到達(dá)最后一個(gè)項(xiàng)目并且找不到另一個(gè)項(xiàng)目，它就會(huì)循環(huán)，重新激活最后一個(gè)項(xiàng)目，并且永遠(yuǎn)不會(huì)停止。

為了解決這個(gè)問題，我：

刪除了上面顯示的代碼；
添加了一個(gè)新的測(cè)試，以便當(dāng)我們要設(shè)置動(dòng)畫的項(xiàng)目是集合中的最后一個(gè)項(xiàng)目時(shí)，在將其淡出并尋找另一個(gè)淡入之前盡早退出。為了進(jìn)行該測(cè)試，我.index()在設(shè)置，并將其與元素總數(shù)進(jìn)行比較。索引是從零開始的，而計(jì)數(shù)當(dāng)然不是從零開始的，所以我需要在索引值上加 1：
```
if (next.index() +1 === items.length) {
    return;
}
```

現(xiàn)在您的代碼可以按您的預(yù)期運(yùn)行。

但是該代碼有一些問題需要修復(fù)：

該按鈕有一個(gè)onclick="myFunction()"，但myFunction()未定義。AFAICT buttonJS 中的點(diǎn)擊處理程序就是您所需要的，并且比使用內(nèi)聯(lián)onClick處理程序更好，所以我刪除了它。
AFAIKjQuery(function($) {和$(document).ready(function() {基本上是相同的，并且應(yīng)該只使用一個(gè)。
同樣，無需將 jQuery 函數(shù)定義包裝在另一個(gè)自執(zhí)行的(function($) {.
不應(yīng)在單擊處理程序內(nèi)定義 jQuery 函數(shù)定義。
對(duì) run 的實(shí)際調(diào)用rotaterator()包裝在 a 內(nèi)$(document).ready(function() {，但代碼已經(jīng)嵌套在其中另一個(gè)內(nèi)，它們不應(yīng)該像那樣嵌套/加倍。
小事 - 該next變量被定義為 jQuery 對(duì)象，因此您可以像使用它一樣next.fadeIn()，而無需像使用它一樣$(next)。
在點(diǎn)擊處理程序中，此代碼會(huì)淡入整個(gè) h1：
```
$("#demo").fadeTo("slow", 1);
```
我猜你有一些 CSS 使它最初不可見？我已經(jīng)添加了。