treehouse : what would you like to learn today?
Web Design Web Development iOS Development

How do I create a 3 second delay in this jQuery. I want it to load the text 3 seconds after the page

  • jQuery.noConflict(); jQuery(document).ready(function() { // milliseconds var intervalTime = 50, div = jQuery(".animate"), st = div.text(), timer, count = 0, total = st.length; div.html("").css("visibility", "visible"); timer = setInterval(showLetters, intervalTime); function showLetters() { if(count < total) { div.html(div.text().split("_").join("") + st.charAt(count) + ""); count++; } else { clearInterval(timer); } } });
  • OK... that doesn't look too good!

  • You can use a setTimeout to delay the execution of a block of code. For example:

    jQuery.noConflict();
    jQuery(document).ready(function () {
        var intervalTime = 50,
            div = jQuery(".animate"),
            st = div.text(),
            timer, count = 0,
            total = st.length;
        div.html("").css("visibility", "visible");
    
        setTimeout(function() {
          timer = setInterval(showLetters, intervalTime);
        }, 3000);
    
        function showLetters() {
            if (count < total) {
                div.html(div.text().split("_").join("") + st.charAt(count) + "");
                count++;
            } else {
                clearInterval(timer);
            }
        }
    });
    

    And btw, to get code to look good on this forum, select it all, hit the 'Code' button, and make sure there's a line break before and after it.

  • Excellent... Thanks champ!

  • hi everyone,

    I'm trying to add this moving/sliding tab into my page. Here's its demo page: http://www.queness.com/resources/html/movetab/index.html

    http://www.gettermpaper.com/

    Can anyone point out what mistake I'm doing ?