動畫使用jQuery，請給我一個更好的「辦法」

很抱歉，但IAM的JS新手（ - ：我有一個動畫DIV中一些span標籤，這段代碼的作品，但它看起來可怕..動畫使用jQuery，請給我一個更好的「辦法」

$('#div span.t1').fadeIn(1500, function() { 
     $(this).next().fadeIn(1500, function() { 
      $(this).next().fadeIn(1500, function() { 
       $(this).next().fadeIn(1500, function() { 
        $(this).next().fadeIn(1500, function() { 
         $(this).next().fadeIn(1500, function() { 
          $(this).next().fadeIn(1500, function() { 
           $(this).next().fadeIn(1500, function() { 
            $(this).next().fadeIn(1500, function() { 
             $('#ownage').animate({ 
              backgroundColor: 'red', 
              color: '#FFF', 
              fontSize: '30px' 
             }, 2000); 
            }); 
           }); 
          }); 
         }); 
        }); 
       }); 
      }); 
     }); 
    });

HTML示例：

<div id="div"> 
<span class="a1">TEXT1</span> 
<span class="a2">TEXT2</span> 
... 
</div>

是否有一個「快」的方式

來源

2011-08-12 opHASnoNAME

我的眼睛正在閱讀此動畫！ :) – Mrchief

好的一個： - ）!!! – opHASnoNAME

只要它工作的很好，讓它看起來很可怕:) – ShankarSangoli

添加類lastSpan到您設置動畫的最後一個跨度，嘗試下面的代碼位。還沒有嘗試過，所以不知道它有多好。

$('#div span.t1').fadeIn(1500, FadeInNext); 

function FadeInNext() { 
    if ($(this).hasClass('lastSpan')) { 
     $(this).next().fadeIn(1500, AnimateOwnage); 
    } else { 
     $(this).next().fadeIn(1500, FadeInNext); 
    } 
} 

function AnimateOwnage() { 
    $('#ownage').animate({ 
     backgroundColor: 'red', 
     color: '#FFF', 
     fontSize: '30px' 
    }, 2000); 
}

來源

2011-08-12 15:12:36 Nalum

thx的作品像一個魅力，我希望沒有人是「動畫」了 – opHASnoNAME

也許recursi？ vely喜歡這個（假設$('#ownage')嵌套在spans）：

function myFadeIn($elem, $stop, duration) { 
    if($elem.is($stop)) { 
     $stop.animate({ 
      backgroundColor: 'red', 
      color: '#FFF', 
      fontSize: '30px' 
     }, 2000); 
     return; 
    } 
    else { 
     $elem.fadeIn(duration, function() { 
      myFadeIn($elem.next(), $stop, duration); 
     }); 
    } 
} 

myFadeIn($('#div span.t1'), $('#ownage'), 1500);

來源

2011-08-12 15:09:03 Mrchief

這不是遞歸！ – ShankarSangoli

@ShankarSangoli：不是？看起來像一個自稱給我的功能。 –

@Mully - 這是'fadeIn'回調處理函數調用'myFadeIn'而不是'myFadeIn'本身。 – ShankarSangoli

由於我們仍在使用相同的總體流程，因此速度並不快。我想更多的是讓它更具可讀性。也許類似於：

function animateStart() { 
    var curSpan = $('#div span.t1'); 
    curSpan .fadeIn(1500, function(){animateNext(0,curSpan)}); 
} 

function animateNext(x,curSpan) { 
    var nextSpan = $(curSpan).next(); 
    if(x < 10) {//or use another forking condition 
    nextSpan.fadeIn(1500,function(){animateNext(x+1,nextSpan)}); 
    }else { 
    $('#ownage').animate({ 
          backgroundColor: 'red', 
          color: '#FFF', 
          fontSize: '30px' 
          }, 
       2000); 
    } 
}

來源

2011-08-12 15:18:54 Hyangelo

動畫使用jQuery，請給我一個更好的「辦法」

回答

相關問題