將jQuery腳本動畫化爲彩色文本

我正在使用以下腳本在特定類中隨機地對文本字母進行彩色處理。我想延長這一點，以便每10秒鐘就能繪製動畫。然後，這個想法是動畫將使用相同的generateColors函數，該函數用於在頁面加載時爲文本着色，從一組顏色動畫到另一組。將jQuery腳本動畫化爲彩色文本

我在動畫中添加了**中包含的代碼，但它不起作用。我還包括了jQuery color animation plugin，但我意識到，隨着我嘗試在下面使用的代碼，我實際上並沒有爲顏色設置動畫，而是嘗試對HTML進行動畫製作，這可能不可行。但我不確定如何使用顏色插件對顏色進行動畫處理，並且很樂意提供任何幫助。

感謝，

尼克

$(document).ready(function() { 

     $('.colour').each(function() { 
     var text = $(this).text().split(''), 
     normal = generateColors(text), 
     **animate = generateColors(text);** 

    $(this).html(normal); 

    **$(this).animate( 
     function(event) { $(this).html(animate) });** 

    }); 
}); 

function generateColors(characters) { 
    var result = ""; 
    var i = 0; 
    for(i=0; i < characters.length; i++) { 
     result += "<span style='color:"+getColor()+"'>"+characters[i]+"</span>"; 
    } 

    return result; 
}   

function getColor() { 
    var colList = ['#942525', '#9E2921','#A4392A', '#8C381E', '#8E4224', '#7C3E21','#B64B26', '#B75D29', '#7F5B24','#665824','#89782E', '#49411F', '#4E512A', '#5E7D37', '#567D38', '#278C8C', '#387872','#1D6362','#257377', '#257377', '#8D3594']; 

    var i = Math.floor((Math.random()*colList.length)); 
    return colList[i]; 
}

setInterval函數

setInterval(function(){ 

$(".colour").each(function colourChange() { 
     var text = $(this).text().split(''); 
     var normal = generateColors(text); 
     $(this).html(normal); 
    }); 
}, 3000); 
});

來源

2012-05-04 Nick

也許如波紋管，你可以使用setTimeout()：

setTimeout(generateColors($('.color').text()), 10000);

來源

2012-05-04 14:03:56 sp00m

我認爲這隻會延遲顏色的設置一次10秒，而不是反覆出現。此外，這不會動畫顏色轉換 – Nick

作爲[這裏]（http://stackoverflow.com/questions/3138756/jquery-repeat-function-every-60-seconds/3138784#3138784）。 – sp00m

謝謝，我有setInterval函數工作，並在我的問題上面添加了它。問題是它不會在頁面加載中運行該功能，並且在轉換中沒有動畫 – Nick

好的，我終於明白了這一點。感謝sp00m讓我在setTimeout的正確軌道上。我添加了動畫改變跨度的顏色在.colour的div以下setInterval函數使用我已經使用的getColor功能（使用彩色動畫插件）：

setInterval(function(){ 
    $(".colour span").each(function() { 
     var colourChange=getColor(); 
     $(this).animate ({ 
     color: colourChange, 
     },2000);  
    }); 

}, 4000); 

});

作品一種享受！

來源

2012-05-04 21:28:41 Nick

將jQuery腳本動畫化爲彩色文本

回答

相關問題