如何僅使用jQuery重寫此JavaScript代碼

Question

我是jQuery的初學者，所以我有一個朋友幫我寫一些腳本，以解決我遇到的問題。 問題是，他幾乎只熟悉Javascript，卻不知道如何將相同的腳本轉換為jQuery。 有沒有辦法將相同的代碼寫入jQuery？

$(document).ready(function() {

    //milliseconds - change this value to modify the delay between 
    //one text animation and the other
    var delay = 1000;    

    //milliseconds - change this value to modify the single text
    //animation speed   
    var timing = 2000; 
    animateText('creative_div', timing);

    //setTimeout allow to call the function animateText after a 
    //certain delay (declared above)
    setTimeout("animateText('motivated_div'," + timing + ");", delay);
    setTimeout("animateText('skilled_div'," + timing + ");", delay * 2);

});

function animateText(divElement, timing) {

    //$(divElement).style="visibility: visible";
    document.getElementById(divElement).style.visibility = "visible";
    $('#'+divElement).effect('drop', 
                        { 
                            direction:"up", 
                            mode:"show", 
                            distance:"400" 
                        }, 
                        timing);
}

Answer 1

干得好：

function animateText(id, t) {
    $('#' + id)
        .css('visibility', 'visible')
        .effect('drop', {direction: 'up', mode: 'show', distance: '400'}, t);
}  

$(function() {    
    var delay = 1000,
        timing = 2000,
        ids = ['creative_div', 'motivated_div', 'skilled_div'];

    $.each(ids, function(i, id) {
        setTimeout(function() { animateText(id, timing); }, delay * i);    
    });
});

---

順便說一句，您可以使用常規的for循環代替$ .each：

for (var i = 0; i < ids.length; i++) {
    setTimeout(function() { animateText(ids[i], timing); }, delay * i);
}

常規循環的執行速度稍快，但丑陋的程度也更高。