How to rewrite this javascript code using only jQuery instead

Question

I am a beginner at jQuery, so I had a friend help me write some script for an effect I was having trouble with. Problem, is he is pretty much only familiar with Javascript and doesn't know how to translate this same script into jQuery. Is there a way to write this same code into 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);
}

This sounds suspiciously like homework. Also use the code sample function on your javascript code. — Jason Slocomb
– Jason Slocomb, Commented Apr 18, 2011 at 21:46
@Jason - Really? Converting plain JavaScript to jQuery sounds like homework to you? What in the world are they teaching in CS departments these days? — Wayne
– Wayne, Commented Apr 18, 2011 at 22:02
@Iwburk - How do you know everyone who uses Stack goes to University? ;) — Jason Slocomb
– Jason Slocomb, Commented Apr 18, 2011 at 22:10

Šime Vidas · Accepted Answer · 2011-04-19 00:09:54Z

1

Here you go:

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);    
    });
});

Btw, you can use a regular for loop instead of $.each:

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

A regular loop preforms slightly faster, but is also slightly more ugly.

edited Apr 19, 2011 at 0:09

answered Apr 18, 2011 at 21:55

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RobG Over a year ago

beauty is in the eye of the beholder! It could be written as a while loop: var i = ids.length;while(i--) {...}.

Šime Vidas Over a year ago

@RobG Yes, poor choice of words from my side. A for-loop is more low-level which can be considered a disadvantage compared to jQuery's method.

Sue Over a year ago

Hi Sime, Thanks so much. Do you know if there is a book or site for absolute beginners to "explain" what certain symbols in the syntax mean? I am so new to this, that I am not sure what * , t and i and other symbols signify. S

Šime Vidas Over a year ago

@Sue * is the multiplication operator. t is just the name I've given to the second argument of the animateText function. I'm calling this function like so: animateText(id, timing); - therefore, the value 2000 is passed into animateText as the second argument. i is the first argument of the $.each callback. Read about $.each function here.

Collectives™ on Stack Overflow

How to rewrite this javascript code using only jQuery instead

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related