衰落從一個SPAN到另一個，最後結束於，jQuery的

我想在文本褪色跨越了一個又一個，每個淡出之前的下一個褪色的，使用jQuery。隱藏在CSS中，從一個跨度試圖淡化到下一個，到最後仍可見結束

<p>IN 
<span class="fadeText">spiring</span> 
<span class="fadeText">nnovative</span> 
<span class="fadeText">genious</span> 
</p>

的跨度將被設置。我嘗試過使用$(".fadeText").each和fadeIn()，的幾種組合，但似乎無法產生這種效果。

任何幫助，將不勝感激

感謝

來源

2011-01-24 NightMICU

View a demo of the following here.

這可以通過創建函數，它的指數作爲參數，並在該指數爲.fadeText元素衰落動畫，將索引遞增並調用本身是否還有剩下的元素來完成。像這樣：

var fadeNext = function (i) { 

    var $ft = $('.fadeText'), 
     timeVal = 1000; 

    $ft.eq(i).fadeIn(timeVal, function(){ 

     i++; 

     if (i < $ft.length) { 
      $(this).delay(timeVal).fadeOut(timeVal, function(){ 
       fadeNext(i); 
      }); 
     } 

    }); 
} 

fadeNext(0);

編輯：更新，以滿足停在最後一個跨度的要求，刪除不正確的遞歸引用。

來源

2011-01-24 04:13:43 mVChr

+1遞歸。 – jmort253 2011-01-24 04:15:20

這正是我想要完成的，除了最後一部分 - 保持最後的跨度可見，而不是淡出它。換句話說，啓發...（淡入）創新...（淡入）INGENIOUS（停止） – NightMICU 2011-01-24 04:21:40

更新爲符合要求。 – mVChr 2011-01-24 04:25:25

試試這個，但對你的跨度一個額外的類：

$('.fadeText .one').fadeIn(1000,function() { 
     $('.fadeText .two').fadeIn(1000,function() { 
      $('.fadeText .three').fadeIn(1000); 
     }); 
    }); 


    <span class="fadeText one">spiring</span> 
    <span class="fadeText two">nnovative</span> 
    <span class="fadeText three">genious</span>

您可以調整1000持續時間增加或減少持續時間。

來源

2011-01-24 04:12:32 jmort253

現場演示：http://jsfiddle.net/xHnzP/1/

var spans = $('span.fadeText'); 

function loop(span) { 
    span.fadeIn(1000).delay(1000).fadeOut(1000, function() { 
     loop(span.next().length ? span.next() : spans.first()); 
    }); 
} 

loop(spans.first());

順便說一句，上面的代碼變淡無限循環的跨度元件。如果你只是想走線槽全部一次，那麼代碼更簡單：

現場演示：http://jsfiddle.net/xHnzP/2/

var spans = $('span.fadeText'); 

function loop(span) { 
    span.fadeIn(1000).delay(1000).fadeOut(1000, function() { 
     span.next().length && loop(span.next()); 
    }); 
} 

loop(spans.first());

UPDATE

我沒沒有注意到你想讓最後一個SPAN保持可見狀態。以下是更新後的代碼：

現場演示：http://jsfiddle.net/xHnzP/5/

var spans = $('span.fadeText'); 

function loop(span) { 
    span.fadeIn(1000, function() { 
     span.next().length && span.delay(1000).fadeOut(1000, function() { 
      loop(span.next()); 
     }); 
    }); 
} 

loop(spans.first());

你可以看到，不同的是弗里斯特兩個版本（上圖），這第三個版本需要兩個嵌套的回調（淡入後，檢查它是否是最後一個SPAN，並在淡出後調用該功能的下一個循環）。

此外，如果您無法解決這個問題，span.next().length是一個檢查，根據當前一個SPAN是否至少有一個SPAN，返回true/false（acutally 1/0）。

來源

2011-01-24 04:19:49

這裏的另一種方法是用你的HTML原樣工作，使用自定義觸發達到遞歸的效果：

$('span.fadeText').bind('fader', function(e) { 
    $(this).fadeIn(500, function() { 
     if ($(this).next('span').length) { // if not the last one 
      $(this).fadeOut(1000, function() { // fade out 
       $(this).next().trigger('fader'); // and move to the next 
      }); 
     } else { 
      return false; 
     } 
    }); 
}).first().trigger('fader'); // tip the first domino

例子：http://jsfiddle.net/redler/Ru4cv/

來源

2011-01-24 04:34:55

衰落從一個SPAN到另一個，最後結束於，jQuery的

回答

相關問題