Question

I’m trying to add some effects with jQuery to splitted words, but I don’t really know how to handle this.

My code starts as it follows:

    $(window).load(function() { 
        var str = $("#animated_text h1").text();
        var substr = str.split(' ');

        $.each(substr, function(index, value) {
            value.fadeIn();
            value.animate({});
        });
    }); 

Thanks for every suggestions

Answer 1

You have to split words and create element for each word. Please find the demo here http://jsfiddle.net/diode/DLx2A/21/

    var str = $("#animated_text h3").text();
    var substr = str.split(' ');


    $("#animated_text h3").remove();


    var wordCount = 0;

    $.each(substr, function(index, value) {

        var $word = $("<h3>" +  value  + "</h3>");
        $word.appendTo("#animated_text");
        $word.delay(index * 100).animate({"font-size":"30px"}).animate({"font-size":"16px"} , function(e){

            wordCount++;

            if(wordCount == $("#animated_text h3").size()){
               $("#animated_text").empty().text(substr.join(" "));
            }


        });

    });