1

I wanted to detect a span element while looping through a div element i.e.

<div class="example">
    These are some <span id ="special" class="anime">special</span> words 
   that should be faded in one after the other.
</div>

using javascript i split the words and fade them in one by one i.e.

JS:

 function doSomething(spanID) {
     alert(spanID);
     }

 var $el = $(".example:first"), text = $.trim($el.text()),
        words = text.split(" "), html = "";

    for (var i = 0; i < words.length; i++) {
        html += "<span>" + words[i] + ((i+1) === words.length ? "" : " ") + "</span>";
    };
    $el.html(html).children().hide().each(function(i){
      // if special span is detected
      // get the span id pass it to doSomething function 
      $(this).delay(i*200).fadeIn(700);
    });
    $el.find("span").promise().done(function(){
        $el.text(function(i, text){
           return $.trim(text);
        });            
    });

working example is here: http://jsfiddle.net/6czap/5/

everything works, it just that i need to detect any special spans so i can do something with them, and then the for loop should carry on doing what it deos. thanks

unknown
  • 846
  • 3
  • 15
  • 38
  • thanks to kevin b proving this solution in the first place, the question is located here http://stackoverflow.com/questions/11637582/fading-a-paragraph-in-word-by-word-using-jquery/11638584#11638584 – unknown Jul 24 '12 at 21:05
  • that's not possible, because after splitting and changing the contents of the div, there is no span with id of `special`. – Ram Jul 24 '12 at 21:15
  • yeh thats what i thought, okay is thier way i could return the div back to its normal state with the special spans inside it after spilting and fadingin it in? – unknown Jul 24 '12 at 21:19
  • yes you can store the contents of the div and then after splitting and performing animation replace the new content with original one. – Ram Jul 24 '12 at 21:23
  • okay thanks could you show me an a mini example of this that would be great.. – unknown Jul 24 '12 at 21:24
  • What is "something" that you want to do, and when do you want to do it? Do you want to do the fade-in differently? Do you want to pause the fade-in? It is possible to do what you want by using regular expressions to modify the special words before you split them up. – wwv Jul 24 '12 at 21:43

1 Answers1

1

Try the following:

var orig = $(".example:first").html()
$el.html(html).children().hide().each(function(i){
  $(this).delay(i*200).fadeIn(700);
}).promise().done(function(){
   $('.example:first').html(orig);
});

demo!

Ram
  • 143,282
  • 16
  • 168
  • 197